vue3+vue-router4的安装使用以及路由守卫

本文使用vue3+vue-router4来演示，关于vue-router基础不了解的可以先看下这里vue2中vue-router的基本使用

安装命令

//不指定版本默认安装最新稳定版本的 需要指定版本使用 @
//本文使用的是 4.0.3 版本
npm i vue-router 

创建router文件夹，index.js文件。创建对应的组件demo1.vue,demo2.vue,demo3.vue

import { createRouter, createWebHashHistory } from 'vue-router'
//静态引入，初始化的时候会加载所有导入的组件
//eg:  import demo1 from '@/views/demo/demo1.vue';
const routes = [
  {
    path:'/demo1',
    name:'demo1',
    // 动态加载引入组件 只有访问的时候才会去加载
    component:()=> import('../views/demo/demo1.vue')
  },
  // 动态路由eg :id
  {
    path:'/demo2/:id',
    name:'demo2',
    component:()=>import('../views/demo/demo2.vue')
  },
  {
    path:'/demo3',
    name:'demo3',
    component:()=>import('../views/demo/demo3.vue')
  },

]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})



export default router

main.js,这里我是把demo7作为初始页面了，默认使用根组件App.vue也可以

import App from "../src/views/demo/demo7.vue";
import router from "./router";
const app = createApp(App);
app.use(store).mount("#app");

初始页面demo7

<template>
 <div>
    <div class="box">
      <button @click="router.push('/')">首页</button>
      <button @click="setToken">设置token</button>
      <button @click="removeToken">清楚token</button>
      <button @click="router.push('/demo1')">跳转demo1</button>
      <button @click="router.push('/demo2/15')">跳转demo2</button>
      <button @click="router.push('/demo3')">跳转demo3</button> 
   </div>
   <router-view></router-view>
 </div>
</template>

<script setup >
import {useRoute, useRouter } from 'vue-router';
//route用来接收参数
const route=useRoute();
//router用来跳转
const router=useRouter();

const setToken=()=>{
    localStorage.setItem('token','111');
}
const removeToken=()=>{
    localStorage.removeItem('token')
}


</script>

meta属性

在配置路由信息的时候除了path，name，component外可以通过meta属性来设置title，requiresAuth等，这里修改下demo3的路由信息。

 {
    path:'/demo3',
    name:'demo3',
    component:()=>import('../views/demo/demo3.vue'),
    meta:{
     //设置标题
      title:'demo3',
     //需要权限
      requiresAuth:true,
    }
  },

运行效果，点击demo1,demo2按钮切换不同组件显示，点击demo3的时候会提示登录，这是因为加上了requiresAuth和配置了前置路由beforeEach

meta还有一些属性，这里简单介绍下。

roles:用于指定访问该路由所需的用户角色。只有拥有对应角色的用户才能访问该页面 

keepAlive:用于标记该路由对应的组件是否需要被缓存。结合keep-alive组件可以实现页面缓存功能。

transition:指定该路由页面切换时的动画效果。在路由切换前，可以根据这个属性设置不同的动画类名。

breadcrumb:用于定义该路由在面包屑导航中的显示文本和链接。方便用户在多级页面中了解当前页面的位置。

loading：标记该路由页面是否需要显示加载状态。当页面需要异步加载数据时，可以根据这个属性显示加载动画。

keywords和description：用于设置页面的关键词和描述，有助于搜索引擎优化。

前置路由守卫beforeEach

前置路由守卫是在路由切换之前执行的钩子函数，主要用于在路由跳转前进行一些验证、数据处理或者其他操作，以此来控制路由的访问权限和跳转逻辑。它可以决定是否允许路由跳转，或者在跳转前进行一些额外的处理，确保应用的安全性和正确性。

// 前置路由守卫在路由跳转前执行，可以用于路由鉴权、页面加载前的准备工作等
router.beforeEach((to,from,next)=>{
  // to可以拿到跳转后的fullpath href  meta，params，path等路由信息
  console.log('to',to);
  
  // from也可以拿到相应路由信息 区别是from是跳转之前的信息
  console.log('from',from);
  // next允许跳转
  // console.log('next',next); 

  if(to.meta.requiresAuth){
    const token=localStorage.getItem('token');
    // console.log('token',token);
    if(token==null || token ==undefined){
      alert('请登录')
    }else{
      // next放行，页面跳转
      next();
    }
  }else{
    next();
  }
}) 

点击设置token按钮后，在跳转demo3即可成功跳转。如果清除token则还是会提示请登录

后置路由守卫afterEach

给demo1，demo2添加title

  {
    path:'/demo1',
    name:'demo1',
    // 懒加载引入组件 只有访问的时候才会去加载
    component:()=> import('../views/demo/demo1.vue'),
    meta:{
      title:'demo1'
    }
  },
  // 动态路由eg :id
  {
    path:'/demo2/:id',
    name:'demo2',
    component:()=>import('../views/demo/demo2.vue'),
    meta:{
      title:'demo2'
    }
  },

 在页面跳转完成后去修改浏览器的标题 

// 后置路由 在路由跳转后执行，通常用于页面跳转后的一些操作
router.afterEach((to, from) => {
  // console.log('后置路由守卫,跳转完成');
  if(to.meta.title){
    document.title=to.meta.title;
  }  
});

运行效果

组件内导航守卫onBeforeRouteLeave

离开当前路由则会触发，给demo2添加上

import { onBeforeRouteLeave} from 'vue-router';
// 组件内的导航守卫  离开当前路由时触发
onBeforeRouteLeave((to,from)=>{
 
 const res=window.confirm('确定离开吗');

 console.log('res',res); //res的值 确定为true，取消为false
 if(!res){
     return false;
 }
})

运行效果，在demo2，点击其他按钮要离开当前组件的时候会进行提示。

end，后续继续补充(如有误欢迎指正)