vue用html方式路由守卫,Vue项目中设置全局路由导航守卫

在Vue项目中国，我们一般会设置一个路由导航守卫，为防止用户未登录直接从地址栏输入地址访问网站其他页面。其中路由导航守卫使用Vue-router提供的方法来实现。

1.在路由的js文件导入VUE路由对象并挂载

import Router from 'vue-router'

Vue.use(Router)

2.创建路由实例

const router = new Router({

routes: [

{ path: '/', redirect: '/login' },

{ path: '/login', component: Login },

{ path: '/home', component: Home}

]

})

3.挂载路由导航守卫

// 挂载路由导航守卫

router.beforeEach((to, from, next) => {

// to 将要访问的路径

// from 代表从哪个路径跳转而来

// next 是一个函数，表示放行

// next() 放行 next('/login') 强制跳转

if (to.path === '/login') return next()

// 获取token

const tokenStr = window.sessionStorage.getItem('token')

if (!tokenStr) return next('/login')

next()

})

标签：Vue,next,守卫,path,router,login,路由

来源： https://www.cnblogs.com/littleRabbit83/p/12516951.html