赞
踩
1.第一步先在Hi页面中放入 <router-view></router-view> 因为子路由Hi1,Hi2到时候要显示在这个Hi的根路由里面,必须在这个根路由里面显示所以要在这个里面写入router-view 标签
如果不写该标签 点入Hi1时 Hi1中的内容没法显示出来
接下来就是在router/index.js文件中操作了
2.先导入 Hi1,Hi2组件
然后在子路由的根路由处加入children
在children中导入根路由和两个子路由
3.然后在App.vue中加入router-link
切记:在加入子路由的router-link标签中的to 路径要写全子路由的路径 不能省略子路由的根路由路径 (说白了 不能直接写/Hi1 必须写全加上Hi1的更目录HI1 写成 /Hi/Hi1)
可以实现效果
但是这块有个小瑕疵 有子路由的情况下 根路由的name是无用的
1.在App.vue中传出参数 切记这个to是动态绑定的 :to to前加冒号 to中的name是你在index.js中绑定路由的name,
后面的params:{} 对象里面就是传给name 路由的参数 第8行绑定的是Hi1子路由
2.在对应name的路由中接受参数 ————使用{{ $route.params.xxx}}来接受参数
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。