想问一下一个vue-router的问题

最新推荐文章于 2024-07-12 16:45:33 发布

公孙杰

最新推荐文章于 2024-07-12 16:45:33 发布

阅读量135

点赞数 2

文章标签： vue-router问题

本文链接：https://blog.csdn.net/qq_44771533/article/details/92839002

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><!--引入路由插件-->
<style type="text/css">
.app2_router{
	position: absolute;
	top: 50px;
	left: 50px;
}
.origin{
	width: 200px;
	height: 120px;
	color: blue;
	background-color: yellowgreen;
}
.register{
	width: 200px;
	height: 120px;
	color: blue;
	background-color: yellow;
}
.login{
	width: 200px;
	height: 120px;
	color: blue;
	background-color: red;
}
.music{
	width: 200px;
	height: 120px;
	color: blue;
	background-color: black;
}
</style>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
<hr>
<div id="app2" title="app2">
    <h2>我是app2</h2>
</div>


<script type="text/javascript">
//前端路由
var logined = false;
var Login = {template:`
	<div class="login">
		我是登录页面
		<br>
		<router-link :to="{name:'mylogin.woman'}">女性登录</router-link><!---嵌套路由-->
		<router-link :to="{name:'mylogin.man'}">男性登录</router-link>
		<router-view></router-view>
		<br>
		<a href="#/">我要回去</a>
	</div>
	`,
	created:function(){
		logined = true;
	},
};
var Origin = {
	template:`
		<div class="origin">
			
		</div>
	`,
};
var Register = {
	template:`
		<div class="register">
			我是注册页面
		</div>
	`,
};
var Music = {
	template:`
		<div class="music">
			我是音乐功能
		</div>
	`,
};
var Woman = {
	template:'<div>欢迎女性</div>'
}
var Man = {
	template:'<div>欢迎男性</div>'
}
// 1.安装插件
Vue.use(VueRouter);
// 2.创建路由对象

var router = new VueRouter();

router.addRoutes([//动态追加路由规则
	{ path:'/mylogin',component:Login, name:'login',
			/// 添加子路由对象,并确定路由规则
			children:[{
				name: 'mylogin.woman',
				path: 'woman',
				component: Woman,
				},
				{
					name: 'mylogin.man',
					path: 'man',
					component: Man,
				},
			] 
		},
		{ path:'/',/*component:Origin, name:'origin'*/redirect:{name:'login'} },
		{ path:'/register',component:Register, name:'register' },//<!--/:name 这玩意一直warning-->
		{ path:'/music',component:Music, name:'music',meta: { isChecked: true } }//给未来路由的权限控制
	]);
var rou = new Vue({
	el: app2,
	router: router,//4.将路由对象关联到Vue实例对象中
	// 5.在<router-view></router-view>指定路由改变的局部位置
	template: `
		<div class="app2_router" title="我是装在app2的路由啦">
			<!--<a href="#/login">点我注册</a>-->
			<!--router-view的内置组件-->
			<router-link :to="{name:'login'}" class="router-link">点我登录</router-link>
			<router-link :to="{name:'music'}">点我听音乐</router-link>
			<router-link :to="{name:'register'}">点我注册</router-link><!--params:{name:'abc'}  这玩意一直warning-->
			<router-link :to="{name:'login'}">点我登录</router-link>
			<router-link :to="{name:'register'}">点我注册</router-link>
			<router-view></router-view>
			<p>在上面出现</p>
			<!--<login/>-->
		</div>
	`
});
router.beforeEach(function(to,from,next){//判断是否进入音乐界面时，是否登录过
	if( !to.meta.isChecked ){
		console.log(logined);
		next();
	}else{
		if(logined){
			console.log(logined);
			next();
		}
		else{
			console.log(logined);
			alert("请先登录");  //next(false)//取消导航
			next({ name:'login' });//重定向
		}
	}
});

</script>
</body>
</html>

想问一下，为什么当我经过login进入music界面时，再刷新界面就不会弹出警告窗（或者直接改url进入music也不会触发警告），求大佬解答