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