码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-13 20:51:22      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:购物   位置   .com   初步   san   ret   pos   父页面   message   

 

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配置子路由

标签:购物   位置   .com   初步   san   ret   pos   父页面   message   

原文地址:https://www.cnblogs.com/jinsuo/p/8280110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!