一、动态路由
动态路由,只要通过对应路由命名格式才能访问到正确的组件。
router.js里面:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/hello/:hello_id',
name: 'Hello',
component: Hello
}
]
})
在hello组件里打印出hello_id,$route.params是vue-router里封装的一个方法。
<div>{{$route.params.hello_id}}</div>
当在浏览器输入localhost:8080/hello时是不能访问到hello组件的,只有按照格式将动态的路由地址输入才行localhost:8080/hello/123,这时hello会打印出id:123
二、嵌套式路由
例如父组件goods访问子组件goodsList,to的路径要写成绝对路径,父组件template:
<div>
<router-link to="/goods/goodsLsit></router-link>
<router-view></router-view>
</div>
在router.js里面这样嵌套:
export default new Router({
routes: [
{
path: '/goods',
name: 'goods',
component: goods,
children: [
{
path: 'goodsList',//这里只写自己的组件名字,因为前面父级路径/goods已经存在
name: 'goodsList',
component: goodsList
}
]
}
]
});