Vue中如何用router全局守卫拦截页面，实现长尾词查询？

本文共计1248个文字，预计阅读时间需要5分钟。

一、背景在Vue项目中，使用vue-router进行页面跳转时，路由的配置方式有两种：静态路由和动态路由。为了控制路由的访问权限，需要使用vuex和router全局守卫进行判断和拦截。

二、静态路由静态路由是指路由的路径和组件在项目启动时就已确定，不会在运行时改变。配置静态路由时，可以在router/index.js文件中直接定义路由：

javascriptimport Vue from 'vue';import Router from 'vue-router';import Home from '@/components/Home';

Vue.use(Router);

export default new Router({ routes: [ { path: '/', name: 'home', component: Home } ]});

三、动态路由动态路由是指路由的路径和组件在运行时根据某些条件动态生成。配置动态路由时，可以使用路由参数或路由动态匹配：

javascriptimport Vue from 'vue';import Router from 'vue-router';import Home from '@/components/Home';

Vue.use(Router);

export default new Router({ routes: [ { path: '/user/:id', name: 'user', component: ()=> import('@/components/User') } ]});

四、路由控制为了控制路由的访问权限，可以使用vuex存储用户信息和权限，然后在router全局守卫中进行判断和拦截。

javascriptimport Vue from 'vue';import Router from 'vue-router';import store from '@/store';import Home from '@/components/Home';import User from '@/components/User';

Vue.use(Router);

const router=new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/user/:id', name: 'user', component: User } ]});

router.beforeEach((to, from, next)=> { if (to.matched.some(record=> record.meta.requiresAuth)) { if (!store.state.user.authenticated) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); } } else { next(); }});

export default router;

在上述代码中，`requiresAuth`是路由元信息中的一个字段，表示该路由需要验证权限。在全局守卫`beforeEach`中，判断用户是否已登录，如果未登录则重定向到登录页面。

一、背景

　　在vue项目中使用vue-router做页面跳转时，路由的方式有两种，一种是静态路由，另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论)

二、使用场景

　　静态路由的使用场景：在我们使用静态路由实现页面跳转时，不管我们是否登录，当我们在地址栏修改地址后，页面会发生跳转并展示页面内容（数据并不会被展示出来），这样的问题显然是不能够被接受的；

　　动态路由的使用场景：动态路由无非就是从后端拿到了数据然后在加到router里面了。假如用户登录了，在地址栏修改地址便能直接访问。所以动态路由并不能起到拦截作用。

三、解决方案

　　使用vuex+router.beforeEach()+动态路由实现页面拦截

　　　　页面刷新时会清楚vuex里面的值;(防止直接修改地址栏)

　　　　router.beforeEach()对跳转前进行拦截判断;（对vuex里面的值进行判断）

　　　　当用户登录时请求后台拿到数据，加载路由.（跳转页面）

四、实现过程

1.首先定义vuex里面的值，需要定义两个值：

a.登录状态信息的值 loginInfo

b.存储动态路由的值routerList

2.router.beforeEach()对路由跳转前进行控制　

//全局守卫 router.beforeEach((to, from, next)=> { let userId = store.state.loginInfo.id; //这里是对登录后的值进行判断，也可对token的值进行判断 if (userId === '') { if (to.meta.requireAuth || to.name == null) { next({path: '/'}) } else { next(); } } else { //初始化动态路由方法 initRouter(router, store); next(); } } );

3.初始化动态路由

在全局守卫对应条件下加载动态路由数据routerList和在登录成功时存储登录成功的信息loginInfo

新建一个xxx.js文件 引入axios 创建一个函数并使用export 暴露该方法;

请求成功拿到数据后，把数据造成和routes里的数据一样。然后使用 router.addRoutes添加进去;

index中的默认路由

import axios from 'axios' export const initRouter = (router,store)=>{ if (store.state.routerList.length > 0) { return; } axios.get(' URL') .then((rest)=>{ let routerList = []; if(rest.data.success){ let routers = rest.data.body; routers.forEach(router=>{ let { path, component, name, } = router let routerObj = { path:path, name:name, component(resolve){ if (component.startsWith("index")) { require(['../components/' + component + '.vue'], resolve) } }, meta:{requireAuth:true} //是否是登录权限控制 }; routerList.push(routerObj); }); //add到router中 router.addRoutes(routerList); //存储到vuex中 store.commit('routerList', routerList); }else{ console.log(rest.data.error); } }).catch((error)=>{ console.log(error); }) }

4.登录成功后存储成功状态信息并跳转页面

至此，页面拦截功能已实现。

五、总结

　　该方法实现主要用到了:

　　1.vuex及页面刷新时会对vuex进行清空，所以比如退出时要对页面window.location.reload()，其它地方类似。

　　2.router.beforeEach()钩子函数及关键的router.addRoutes方法

　　3.es6的一些写法

以上就是vue中使用router全局守卫实现页面拦截的示例的详细内容，更多关于vue 页面拦截的资料请关注易盾网络其它相关文章！