VUE路由繼續改進

爲了學習嵌套路由，我們將原來的路由器給抽取出來！

抽取成一個單獨的目錄：

index.js

import Vue from 'vue'
import VueRouter from "vue-router"
Vue.use(VueRouter);

let routes = [
    {
      path:"/foo",
      component:()=>import("../views/Foo.vue")
    },{
      path:"/bar",
      component:()=>import("../views/Bar.vue")
    },{
      path:"/dynamic/:id",
      component:()=>import("../views/Dynamic.vue")
    }
  ];
  
  // 路由器 (路由器中有路由列表)
  const router = new VueRouter({
    routes
  });

  // 到處路由器
  export default router;

 

這樣一抽取，main.js 瞬間整潔了很多！

 

————————————————————————————————————————————————

上面做出調整，主要是爲了測試嵌套路由！

 

上面是我從官網抄來的，我們照着它寫就行了

我準備給Bar組件添加連個子組件

1， 配置路由列表

{
      path:"/bar",
      component:Bar,
      children:[
        {
           
            path: 'profile',
            component: UserProfile
          },
          {
           
            path: 'posts',
            component: UserPosts
          }
      ]
    }

2， 添加路由容器

 

3， 路由導航我就不寫了，我就測試就行了！