VUE中的路由守卫——beforeEach()

最新推荐文章于 2024-05-11 10:05:08 发布

一个前端女子

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量6.4k

点赞数 5

分类专栏： vue2 文章标签： javascript safari 开发语言

本文链接：https://blog.csdn.net/qq_44173499/article/details/123441665

版权

vue2 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

1.router.beforeEach()全局前置守卫

2.路由守卫主要用于"检验是否登录"了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都用请求的全局拦截来做了。

3.to是一个对象 from：从哪个路由离开， next：函数，决定是否展示你要看到的路由页面。

4.代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/index">主页</router-link>
<router-link to="/login">登录</router-link>
<router-link to='/register'>注册</router-link>
<router-link to='/user'>用户中心</router-link>
<router-view></router-view>
</div>

<script src="js/vue.js"></script>
<!-- 1.引入 路由插件 -->
<script src="js/vue-router.js"></script>

<script>
// 申明局部组件
var Index  = {
template:`
        <div>
            <p>我是主页</p>
        </div>
        `,
}
var Login  = {
template:`
        <div>
            <p>我是登录页</p>
        </div>
        `,
}
var Register  = {
template:`
        <div>
            <p>我是注册页</p>
        </div>
        `,
}
var User  = {
template:`
        <div>
            <p>我是用户中心页</p>
        </div>
        `,
}
// 2.使用路由插件
Vue.use(VueRouter);
// 3.创建路由对象
var router = new VueRouter({
// 配置路由
routes :[
{
path:'/index',
name:'index',
component:Index
},
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
},
{
path:'/user',
name:'user',
component:User
}
]
})

// vue实例
// vue路由守卫（全局守卫）
var vm = new Vue({
el:'#app',
router,
data:{

},
methods:{

},
mounted:function(){
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('请先登录');
next('/login')
}
})
}
})
</script>
</body>
</html>

一个前端女子

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
VUE中的路由守卫——beforeEach()

1.router.beforeEach()全局前置守卫2.路由守卫主要用于"检验是否登录"了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都用请求的全局拦截来做了。3.to是一个对象 from：从哪个路由离开， next：函数，决定是否展示你要看到的路由页面。4.代码：<!DOCTYPE html><html lang="en"><head><m...
复制链接

扫一扫