路由前置-路由守卫
...... //创建一个路由器 const router = new VueRouter({
routes: [ {
name: 'guanyu', path: '/about', component: About }, {
name: 'zhuye', path: '/home', component: Home, children: [ {
path: 'news', component: News }, {
name: 'xiaoxi', path: 'message', component: Message, children: [ {
name: 'xiangqing', path: 'detail', component: Detail, props({
query: {
id, title}}) {
return {
id, title} } } ] } ] }, ] }) //全局前置路由守卫 //初始化的时候调用、每次切换之前调用 router.beforeEach((to, from, next) => {
console.log(to, from); if (to.path === '/home/news' || to.name ==='xiaoxi') {
if (localStorage.getItem("school") === "三里屯小学") {
next() }else {
alert("无权限") } }else{
next() } }) export default router; 可以看到我们在前置路由守卫中判断了当路径是 news 或 name =‘xiaoxi’ 时进行权限的校验，如果判断条件太多，这个 if 语句就会很繁琐，我们可以在配置路由信息时使用 meta
...... const router = new VueRouter({
routes: [ {
......}, {
...... children: [ {
path: 'news', ...... meta:{
isAuth:true } }, {
name: 'xiaoxi', ...... meta:{
isAuth:true }, children: [......] } ] }, ] }) //全局前置路由守卫 //初始化的时候调用、每次切换之前调用 router.beforeEach((to, from, next) => {
if (to.meta.isAuth) {
...... }else{
...... } }) export default router; 全局后置-路由守卫
const router = new VueRouter({
routes: [ {
name: 'guanyu', ...... meta: {
title: '关于'} }, {
name: 'zhuye', ...... meta: {
title: '主页'}, children: [ {
path: 'news', component: News, meta: {
isAuth: true, title: '新闻' } }, {
name: 'xiaoxi', path: 'message', component: Message, meta: {
isAuth: true, title: '消息' }, children: [ {
name: 'xiangqing', path: 'detail', component: Detail, meta: {
title: '详情' }, ...... } ] } ] }, ] }) ...... //全局后置路由 //初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to, from) => {
console.log(to, from); document.title = to.meta.title || "" }) export default router; 独享路由守卫
独享路由守卫即给路由单独设置的路由守卫，使用 beforeEnter，例如我们单独给消息设置一下当 localstorage 中 school 为三里屯小学时才能查看，否则就提示，功能和之前写的一样
{
name: 'xiaoxi', path: 'message', component: Message, meta: {
isAuth: true, title: '消息' }, beforeEnter: ((to, from, next) => {
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "三里屯小学") {
next() } else {
alert("无权限") } } else {
next() } } ), children: [] } 组件内路由守卫
给组件内单独设置路由守卫，例如修改 About
<template> <h2>我是About的内容</h2> </template> <script> export default {
name: "About", //通过路由规则，进入该组件时被调用 beforeRouteEnter(to,from,next){
console.log("About beforeRouteEnter",to,from); //一些组件内特有的 }, //通过路由规则，离开该组件时被调用 beforeRouteLeave(to,from,next){
console.log("About beforeRouteLeave",to,from); //一些组件内特有的 next() } } </script> 路由器的两种工作模式
执行npm run build进行打包，目录下会生成一个 dist 文件夹，部署到线上
修改路由的工作模式，修改 mode，值为history或hash
这里不做过多讲解，可以修改看下路径的区别，或用 express 部署一个本地的服务器把代码部署一下看看效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204977.html原文链接：https://javaforall.net
