第2节:vue-router配置子路由

Posted jinsuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第2节:vue-router配置子路由相关的知识,希望对你有一定的参考价值。

 

http://jspang.com/2017/04/13/vue-router/  原文网址

 

我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。

一、改造App.vue的导航代码

我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用<router-link>标签增加了两个新的导航链接。

App.vue代码

 

这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1  和 Hi页面2

技术分享图片

二、改写components/Hi.vue页面

把Hi.vue改成一个通用的模板,加入<router-view>标签,给子模板提供插入位置。“Hi页面1”   和 “Hi页面2”  都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入<router-view>标签。

components/Hi.vue,就是第5行的代码,其他代码不变。

 

 

三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。

Hi1.vue

Hi2.vue

 

四、修改router/index.js代码

我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。

需要注意的是,在配置路由文件前,需要先用import引入Hi1和Hi2。

总结:

这节课学的内容在路由配置里经常用到,比如我们作一个购物模块,购物模块里有很多相同的元素,我们就会利用这种子路由的形式,先定一个父页面,然后再修改子页面。希望这节课对你有帮助,其实子路由的步骤还是有些繁琐的,所以希望你们多练习几遍,能够完全掌握。

 

以上是关于第2节:vue-router配置子路由的主要内容,如果未能解决你的问题,请参考以下文章

第5节:vue-router 利用url传递参数

Vue路由基本使用

vue-router

Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)router-link 标签的属性路由代码跳转懒加载路由嵌套(子路由)路由传递数据导航守卫)

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

ATP应用测试平台——关于vue-router前端路由的配置使用案例