目录
1. Hash模式和History模式
2. 导航守卫
3. 路由元信息
1. Hash模式和History模式
Hash模式(历史模式)和History模式(哈希模式)是匹配路由的两种模式,一般默认配置Hash模式,可以在index.js页面中将路由匹配的模式换为哈希模式
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 使用哈希模式需要导入createWebHashHistory
import HomeView from '../views/HomeView.vue'const router = createRouter({// 历史模式history: createWebHistory(import.meta.env.BASE_URL),// 哈希模式history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}]
});
哈希模式和历史模式的区别:
- 哈希模式下地址栏中有#号标识,历史模式下则没有#号标识,但两者的传参方式是一样的
- 在项目打包之前,我们在开发者模式下是观察不到哈希模式和历史模式的区别的,但是当项目打包后我们会发现当我们尝试进入一个不存在的页面时,历史模式会向后端发送请求,因为浏览器没有匹配到路由组件,所以向服务器发送请求页面去了,这种情况下控制台会出现404报错,要想让控制台不报错得加后端配置,如果服务器不存在这个地址就把原页面返回,不要出现404错误,而哈希模式就不会出现这个问题,因为他有#表示,浏览器不会当成url向服务器请求的。
2. 导航守卫
导航守卫就是路由跳转中的一个拦截器。全局前置守卫:所有路由跳转前都会先经过这个守卫的拦截。beforeEach内部返回false表示不同意跳转;返回true同意跳转。
router.beforeEach((to, from,next) => {// to:目的地页面路由 from:当前要切换的路由// 返回false以取消导航// 一般需要授权验证的页面才需要拦截,其他页面直接放行。if (to.path == '/about') {if (localStorage.getItem('token')) next();//已登录,允许跳转else {console.log('请先登录');next(`/login?target=${to.path}`)//跳转登录页面}}// return falseelse {next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转}// 保证任意条件下next只执行一次 })
3. 路由元信息
在 Vue Router 中,路由元信息(Route Meta Fields)是一种用于给路由添加额外信息的方式。通过路由元信息,我们可以为每个路由定义一些自定义的数据,这些数据可以在路由导航守卫和组件中访问,从而实现更灵活的路由控制和处理。我们可以将自定义的数据写道 meta里面。
routes: [{path: '/',name: 'home',component: HomeView,// meta自定义路由参数只能写在这里面meta: {// 路由元信息,主要是给路由设置自定义参数。isAuth:true,}}]
可以用来认证进入该页面是否需要登录,给需要登陆的页面都加上isAuth,然后在导航守卫中通过isAuth来判断。