导航守卫

一开始我以为导航守卫是要在写在main.js中，然后看了网上很多代码，发现这块是可以单独写成一个xxx.js文件，然后在main.js中引入进来,这样就是一个全局引入。当然在xxx.js中，需要将路由文件引入进来，不然你怎么操作路由呐。【思考脸】

然后对于next()的理解不是很透彻。

查看官网，你会发现其实人家解释的很清楚。next() 会进行管道中的下一个钩子，这句话其实不是太过于明白，但是通过实例，可以暂时自理解为当你的导航变化时，满足你自己编写的条件时，就会进入它的下一个钩子函数中。

但当时的写的代码是这样的

if (to.path == '/' || to.path == '/upload-version') {next()} else {if (to.path == '/remote-shell') {next()} else {next()}}

当时我的想法以为是，只要路由发生了变化，我在这边就需要进行判断来监听一下。后来想想这样是有问题的呀，假如我配置的路由有很多path,难道我还要一个一个去比较啊，所以上面的方法肯定是行不通的。所以我后期只判断了一个地址。

router.beforeEach((to, from, next) => {
//首先判断是否有值
if (getPort() && getAddress()) {//有 直接给stroe赋值var ipp = { port: getPort(), address: getAddress() }console.log(ipp);//如果getters中没有值就赋值console.log(store.getters.gethip);if (store.getters.geti == '') {console.log("有没有有没有没有")store.dispatch('choicePort', ipp).then(() => {console.log(store.getters);}).catch(() => { })store.dispatch("registerMessageListener").then().catch()next()}else{next();}
} else {//没有 跳转到选择页面中去，配置地址if ((to.path) == '/xxxx') {next()} else {next('/xxx');}
}

直接通过next()就可以完成跳转了不用每次路由变化就去判断

这是以前提的一个问题

vue-router 中导航守卫问题相关推荐

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
Vue——vue3路由导航守卫及其写法
导航守卫:一个页面跳转到另一个页面,中间会触发某个函数导航守卫3个状态 <script> export default {methods: {},beforeRouteEnter () ...
vue 设置路由导航守卫控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下 ...
vue 通过路由导航守卫控制访问权限
1.作用:防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限. 2.实现代码 2.1在router/index.js中添加如下代码, const router = new VueRoute ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
解决导航守卫router.beforeResolve使用不了this.$store
在vue router的导航守卫如beforeEach()中是无法直接通过this.$store去操作vuex的,因为这里的this指向不一致. 正确写法 import store from '../ ...
Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashch ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...

vue-router 中导航守卫问题

导航守卫

vue-router 中导航守卫问题相关推荐

最新文章

热门文章