1920的网站做字体大小,购买友情链接网站,烟台网站建设公司,北京家居网站建设目录
1. Hash模式和History模式
2. 导航守卫
3. 路由元信息
4.路由懒加载 1. Hash模式和History模式
Hash模式#xff08;哈希模式#xff09;和History模式#xff08;历史模式#xff09;是匹配路由的两种模式#xff0c;一般默认配置Hash模式#xff0c;可以在in…目录
1. Hash模式和History模式
2. 导航守卫
3. 路由元信息
4.路由懒加载 1. Hash模式和History模式
Hash模式哈希模式和History模式历史模式是匹配路由的两种模式一般默认配置Hash模式可以在index.js页面中将路由匹配的模式换为哈希模式
import { createRouter, createWebHistory, createWebHashHistory } from vue-router
// 使用哈希模式需要导入createWebHashHistory
import HomeView from ../views/HomeView.vueconst 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来判断。
4.路由懒加载
主要用来优化代码体积当我们使用npm run build命令将项目打包放到服务器时使用路由懒加载来优化代码体积可以提高用户的体验
之前我们导入组件使用的都是同步导入的方式在首次加载页面时这些组件内容都一并被浏览器加载了当入口js文件体积变大时浏览器加载和解析的速度就会变慢首屏加载时间就会延长用户体验不好可能会长时间处于白屏阶段。
import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vueconst router createRouter({// 历史模式history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView,// meta自定义路由参数只能写在这里面}]
});export default router但是现在我们可以使用路由的懒加载来导入组件将每一个组件单独打包一个js/css文件当用户访问路由了再加载对应的 js文件减轻了入口js的代码体积解析和加载速度就快了首屏加载事件也缩短了从而提高用户的体验。 {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)}
