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，添加路由容器