深圳营销型网站建设方案服务商百度seo分析工具
本文使用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，取消为falseif(!res){return false;}
})运行效果，在demo2，点击其他按钮要离开当前组件的时候会进行提示。
end，后续继续补充(如有误欢迎指正)