Vue之动态路由、嵌套路由

一、动态路由

动态路由,只要通过对应路由命名格式才能访问到正确的组件。

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
}
]
}
]
});