VUE3中路由常用配置及常见问题解决方法

1、路由守卫

        vue3中常见路由守卫有三种①全局后置守卫②路由独享守卫③组件路由守卫，下面上代码举例说明：

main.ts中全局路由守卫

 //全局导航守卫、路由守卫、路由拦截
 router.beforeEach((to,from,next) =>{
   //验证token,只有存在token的时候，才能跳转到内容页
   console.log(to);
   console.log(from);
   let token = localStorage.getItem("token");
   //console.log(token);
   if(token || to.path === '/'){
     next();
     console.log(token);
   } else {
     console.log('没有token，又回来了')
     next("/");
   }
 })

router/index.ts中路由独享守卫

 {
        path: '/tableDemo',
        name: 'tableDemo',
        //meta为自定义属性，路由跳转的时候会带过去
        meta: {
          name:'我是表格demo'
        },
        component: () => import('../components/tableDemo.vue'),
                //子路由
         children: [
	     {  path: 'child',component: child },

      ], 
         beforeEnter: (to, from, next) => {
        // 组件独享守卫
//            to： 即将要进入的目标路由对象
// from： 即将要离开的路由对象
// next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径
           console.log(to, from, next)
           next()
        },
 

  },

在自定义组件中添加方法，注意组件路由守卫不支持setup语法糖，解决方法为增加sciript标签，上下两部分有两个script标签。例：

<script lang="ts">
import { defineComponent } from "vue";
import {
  beforeRouteEnter,
  beforeRouteUpdadte,
  beforeRouteLeave,
} from "vue-router";
export default defineComponent({
  //注意组件内守卫不支持setup语法糖
  beforeRouteEnter(to, from, next) {
    console.log(to, from);
    console.log("form", from);
    console.log("to", to);
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
  beforeRouteUpdadte(to, from, next) {
    console.log(to, from);
    console.log("form", from);
    console.log("to", to);
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    console.log("form", from);
    console.log("to", to);
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
});
</script>
<script lang="ts" setup>
import Ltable from "@/components/commonTable/index.vue";
import { ref, reactive, nextTick, onMounted, toRefs } from "vue";
import { useRouter, useRoute, beforeRouteEnter } from "vue-router";
import { ElMessage } from "element-plus";


</script>

另一种代码结构为：

<script lang="ts">
// import { logicalExpression } from "@babel/types";
// 在setup语法中，组件导入之后就能够直接使用，不需要使用components进行局部注册

// ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value
// reactive 定义的数据： 操作数据和读取数据均不需要 .value
import {
  defineComponent,

} from "vue";

import { IntData } from "../types/login";
import mySon from "../components/son.vue";
import { useStore } from "vuex";
import {

  beforeRouteEnter,
  beforeRouteUpdadte,
  beforeRouteLeave,
} from "vue-router";
export default defineComponent({
  name: "login",

  //注意组件内守卫不支持setup语法糖
  beforeRouteEnter: (to, from, next) => {
    console.log(to, from);
    console.log("form", from.params.id);
    console.log("to", to.params.id);
    console.log("组件内路由前置守卫 beforeRouteEnter", this); // 访问不到this
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
  beforeRouteUpdadte: (to, from, next) => {
    console.log(to, from);
    console.log("form", from);
    console.log("to", to);
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
  beforeRouteLeave: (to, from, next) => {
    console.log(to, from);
    console.log("form", from);
    console.log("to", to);
    next((vm) => {
      console.log("组件内路由前置守卫 vm", vm); // vm 就是this
    });
  },
  setup: (props, context) => {

  },
});
</script>

总之不要卸载setup语法糖内，否则会报错。 

2、子路由及子路由跳转，注意的点是①配置子路由时，path属性中不要添加/ ②父组件中需要在合适的地方添加router-view标签，否则无法跳转，例：

  {
        path: '/tableDemo',
        name: 'tableDemo',
        //meta为自定义属性，路由跳转的时候会带过去
        meta: {
          name:'我是表格demo'
        },
        component: () => import('../components/tableDemo.vue'),
                //子路由
         children: [
	     {  path: 'child',component: child },

      ], 
         beforeEnter: (to, from, next) => {
        // 组件独享守卫
//            to： 即将要进入的目标路由对象
// from： 即将要离开的路由对象
// next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径
           console.log(to, from, next)
           next()
        },

//父组件需要添加router-view标签
<template>
  <div class="app-container">
    <Ltable
      :tableData="list"
      :tableHeader="tableHeader"
      :listLoading="listLoading"
      :maxHeight="maxHeight"
      :listData="listData"
    ></Ltable>
  </div>
  <el-button @click="jumpIndex">跳转</el-button>
  <router-view></router-view>
</template>

3、路由懒加载，优化项目加载速度，例：

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 懒加载写法一 ： 先声明，下面直接使用
const index= () => import('./index.vue')

// 声明路由跳转的路径与组件的对应关系
const routsList = [

    // 直接使用上面声明的组件
    {path:'/index',name:'index',component:index},
    
    // 懒加载写法二 ：直接使用动态导入的语法进行导入
    {
        path:'/demo',
        name:'demo',
        component:() => import('./demo.vue')
    },

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory(), 
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

先写这么多，都是常用的方法，后面继续更新其它配置及方法