Vue-Router原理实现

Vue-Router的使用步骤

1. 在vue项目中使用vue-router的步骤：

   1. 安装vue-router

   2. 创建router对象

      1. 使用 Vue.use注册vue-router组件
      2. 定义路由规则
      3. 根据路由规则创建 router 对象

      import Vue from "vue";
      import VueRouter from "vue-router";
      
      // Vue.use注册组件，如果传入的是一个方法，则调用该方法注册组件，如果传入的是一个对象，则调用对象的install方法来注册组件
      Vue.use(VueRouter);
      
      // 路由规则
      const routes = [
        {
             
          path: "/index",
          name: "index",
          component: () =>
            import(/* webpackChunkName: "index" */ "../views/Index.vue")
        },
        {
             
          path: "/blog",
          name: "blog",
          component: () => import(/* webpackChunkName: "blog" */ "../views/Blog.vue")
        },
        {
             
          path: "/photo",
          name: "photo",
          component: () =>
            import(/* webpackChunkName: "photo" */ "../views/Photo.vue")
        }
      ];
      
      // 创建 router 对象
      const router = new VueRouter({
             
        routes
      });
      
      export default router;
      

   3. 创建Vue实例时，将router对象传入

      import Vue from "vue";
      import App from "./App.vue";
      import router from "./router";
      
      Vue.config.productionTip = false;
      
      new Vue({
             
        router,
        render: h => h(App)
      }).$mount("#app");
      

2. 动态路由

   1. 两种实现方式

      1. 在路由规则中通过:paramName的形式声明动态路由参数，然后再组件中通过 $route.params.paramName来访问参数。

         // 路由规则配置
         {
                  
           name: "blog",
           path: "/blog/:id",
           component: () => import(/* webpackChunkName: "blog" */ "../views/Blog.vue")
         }
         // 组件中使用
         <template>
           <div>Blog{
                  {
                   $route.params.id }}</div>
         </template>
         
         <script>
         export default {
                  
           name: 'blog'
         }
         </script>
         

      2. 在路由规则中通过:paramName的形式声明动态路由参数，设置props:true，route.params 将会被设置为组件属性。在组件中就可以组件属性的方式访问路由参数

         // 路由规则配置
         {
                  
           name: "photo",
           path: "/photo/:num",
           // props 向路由组件传参，可以是一个Boolean，对象，或函数
           props: true, // 为true时，route.params 将会被设置为组件属性。
           component: () =>
             import(/* webpackChunkName: "photo" */ "../views/Photo.vue")
         }
         // 组件中使用
         <template>
           <div>Photo {
                  {
                   num }}</div>
         </template>
         
         <script>
         export default {
                  
           name: 'Photo',
           props: ['num']
         }
         </script>
         

   2. 路由规则配置中props的3种情况

      1. props为true，route.params 将会被设置为组件属性

      2. props是一个对象时，会按原样设置为组件属性