Vue3项目使用Vue-router4（对比vue2配合Vue-router3）

使用脚手架搭建的Vue3项目默认使用的路由版本是4，由于Vue3和Vue2写法差异较大，所以需要从新熟悉Router用法，本篇文章比较下两个版本的写法差异，不做深层次的讲解，主要是我也不懂。

1 Vue2配合Vue-router3

说多了没用，直接上代码

   

    

     

      

     
     

      

       import Vue from 'vue'
      
     
    

     

      

     
     

      

       import VueRouter from 'vue-router'
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       Vue.use(VueRouter)
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       const routes = [{
      
     
    

     

      

     
     

      

         path: '/',
      
     
    

     

      

     
     

      

         name: '首页',
      
     
    

     

      

     
     

      

         component: () =>
      
     
    

     

      

     
     

      

           import( /* webpackChunkName: "page" */ '@/views/index'),
      
     
    

     

      

     
     

      

         meta: {
      
     
    

     

      

     
     

      

           requireAuth: true,
      
     
    

     

      

     
     

      

         },
      
     
    

     

      

     
     

      

         children: [{
      
     
    

     

      

     
     

      

           path: '/index',
      
     
    

     

      

     
     

      

           name: '首页',
      
     
    

     

      

     
     

      

           component: () =>
      
     
    

     

      

     
     

      

             import( /* webpackChunkName: "page" */ '@/views/wel'),
      
     
    

     

      

     
     

      

           meta: {
      
     
    

     

      

     
     

      

             requireAuth: true,
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

         }]
      
     
    

     

      

     
     

      

       }]
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       const router = new VueRouter({
      
     
    

     

      

     
     

      

         mode: 'history',
      
     
    

     

      

     
     

      

         base: process.env.BASE_URL,
      
     
    

     

      

     
     

      

         routes
      
     
    

     

      

     
     

      

       })
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       export default router
      
     
   
  

   
  
  

上面这种写法是比较通用的，配置的是动态路由，前台只配置常用的几个即可。

2 Vue3配合Vue-router4

   

    

     

      

     
     

      

       import { createRouter, createWebHistory } from "vue-router";
      
     
    

     

      

     
     

      

       import login from "../views/login.vue";
      
     
    

     

      

     
     

      

       import index from "../views/index.vue";
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       const routes = [
      
     
    

     

      

     
     

      

         {
      
     
    

     

      

     
     

      

           path: "/login",
      
     
    

     

      

     
     

      

           name: "登录",
      
     
    

     

      

     
     

      

           component: login,
      
     
    

     

      

     
     

      

           meta: {
      
     
    

     

      

     
     

      

             requireAuth: false,
      
     
    

     

      

     
     

      

           },
      
     
    

     

      

     
     

      

         }, {
      
     
    

     

      

     
     

      

           path: "/",
      
     
    

     

      

     
     

      

           name: "首页",
      
     
    

     

      

     
     

      

           component: index,
      
     
    

     

      

     
     

      

           meta: {
      
     
    

     

      

     
     

      

             requireAuth: true,
      
     
    

     

      

     
     

      

           },
      
     
    

     

      

     
     

      

         },
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       ];
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       const router = createRouter({
      
     
    

     

      

     
     

      

         history: createWebHistory(process.env.BASE_URL),
      
     
    

     

      

     
     

      

         routes
      
     
    

     

      

     
     

      

       });
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       export default router;
      
     
   
  

   
  
  

导入createRouter, createWebHistory这两个方法，使用createWebHistory方法创建一个routerHistory对象，使用 createRouter 创建路由器。

3 跳转

Vue3和Vue2版本跳转区别挺大，因为this的问题。

Vue2跳转

   

    

     

      

     
     

      

       this.$router.push({
      
     
    

     

      

     
     

      

         path: "/index"
      
     
    

     

      

     
     

      

       });
      
     
   
  

Vue3跳转

   

    

     

      

     
     

      

       import { useRoute, useRouter } from "vue-router";
      
     
    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup(props, context) {
      
     
    

     

      

     
     

      

           // 获取路由器实例
      
     
    

     

      

     
     

      

           const router = useRouter();
      
     
    

     

      

     
     

      

           // route是响应式对象,可监控器变化
      
     
    

     

      

     
     

      

           const route = useRoute();
      
     
    

     

      

     
     

      

           const onSubmit = e => {
      
     
    

     

      

     
     

      

             e.preventDefault();
      
     
    

     

      

     
     

      

             validate()
      
     
    

     

      

     
     

      

               .then(() => {
      
     
    

     

      

     
     

      

                 login(state.login).then(res => {
      
     
    

     

      

     
     

      

                   if (res.code == 0) {
      
     
    

     

      

     
     

      

                     router.push("/");
      
     
    

     

      

     
     

      

                   }
      
     
    

     

      

     
     

      

                 });
      
     
    

     

      

     
     

      

               })
      
     
    

     

      

     
     

      

               .catch(err => {});
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

   
  
  

可以看到，Vue3，需要单独引入。