Vue视频教程系列第三十七节-子路由地配置
2018-10-23 本文已影响3人
独绽2018
子路由即为设置的子页面的路径。子页面或者说子组件会有一个父页面或者父组件,设置子路由需要在router.js里进行设置,是谁的子页面就在其父路由里进行设置。
首先在router.js里配置如下
-
首先引入子页面 import About1 from ‘./views/About1.vue’
-
在about的路由设置里设置
Children: [
{
path: ‘about1’,
component: About1
}
]
其实就是在about路由里配置children数组,这个数组里同样是对象的集合,里面有path,name,component等,与配置其父路由是一样的。
只是需要避开一个小坑—设置path时,一定不要加’/’,加了’/’说明是在根路径下了,而不是其父路径下的了。切记。
屏幕快照 2018-10-23 上午7.34.18.png接下来就是在DOM里应用这个路由
应用路由同我们之前讲的是一模一样的了,同样是在<router-link>里的to属性里设置路径。这里设置路径的时候,需要从父路径开始的完整的路径。
以上就是这些内容,比较简单。一开始并没有将其规划在课程当中,后来就小伙伴们问,也为了一个课程的完整性,所以附加这么一节课。
就到这里了,休息休息一会儿吧:)明天继续加油噢!