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