路由守卫

最新推荐文章于 2024-04-30 11:49:46 发布

Mr.ZKH

最新推荐文章于 2024-04-30 11:49:46 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs

本文链接：https://blog.youkuaiyun.com/weixin_44415461/article/details/98626741

Vuejs 专栏收录该内容

41 篇文章

订阅专栏

本文介绍Vue中路由守卫的使用方法，包括前置守卫与后置守卫，以及如何通过它们实现登录验证。同时，文章还详细展示了嵌套路由的配置过程，通过实例代码解释了如何创建和使用嵌套路由。

const router = new VueRouter({ ... }
//前置的钩子函数 最后要执行next（）才会跳转
router.beforeEach((to, from, next) => {
  // ...
})
//后置的钩子函数 已经跳转了不需要next
router.afterEach((to, from) => {
  // ...
})

主要是简单介绍一下，路由守卫主要用于检验是否登录了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都用请求的全局拦截来做了。大致了解一下路由守卫即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套路由</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	//声明组件
	var Nav = {
		template:`
		<div>
		    <router-view></router-view>
			<router-link :to="{name:'nav.index'}">首页</router-link>
			|
			<router-link :to="{name:'nav.pensonal'}">个人中心</router-link>
			|
			<router-link :to="{name:'nav.message'}">咨询</router-link>
			|
			<router-link :to="{name:'nav.mine'}">我的</router-link>

		</div>`
	}
	var Index = {
		template:`
		<div>
			首页
		</div>`
	}
	var Pensonal = {
        template:`
        <div>
        	个人中心
        </div>`
	}
	var Message = {
		template:`
		<div>
			资讯
		</div>`
	}
	var Mine = {
		template:`
		<div>
			我的
		</div>`
	}
	//安装路由插件
	Vue.use(VueRouter);
	//创建路由对象
	var router = new VueRouter({
        //配置路由对象
        routes:[
        //重定向首页
           {path:'',redirect:'/nav'},
           { path:'/nav',
             name:'nav',
             component:Nav,
             //嵌套子路由,使用属性children
             children:[
                //配置子路由
                {path:'',redirect:'/nav/index'},  //重定向
                {path:'index',name:'nav.index',component:Index},
                {path:'pensonal',name:'nav.pensonal',component:Pensonal},
                {path:'message',name:'nav.message',component:Message},
                {path:'mine',name:'nav.mine',component:Mine}
             ]
          }
        ]
	})
	new Vue({
		el:'#app',
		router,
		template:`
		<div>
			<router-view><router-view>
		</div>`,
		data(){
			return {

			}
		},
		methods:{

		},
		mounted(){
			//to去哪里  from从哪里来  next 执行
			router.beforeEach((to,from,next)=>{
				console.log(to)
				if(to.path=='/nav/index'){
					next()
				}else{
					setTimeout(function(){
						next()
					},2000)
				}
			})
		}

	})
</script>
</html>

运行效果图：

在这里插入图片描述