VUE 使用 watch 监听路由

最新推荐文章于 2024-08-12 14:22:13 发布

古雅学长

最新推荐文章于 2024-08-12 14:22:13 发布

阅读量303

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_46179813/article/details/108577085

版权

VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue-2.4.0.js"></script>
		<!-- 1.引入路由 -->
		<script src="./lib/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="login">登录</router-link>
			<router-link to="register">注册</router-link>
			<!-- 容器 -->
			<router-view></router-view>
		</div>
	</body>
	<script>
		// 2.创建子组件
		var login = {
			template:"<h2>这是登录子组件</h2>"
		}
		
		var register = {
			template:"<h2>这是注册子组件</h2>"
		}
		
		// 3.创建一个路由对象
		var router = new VueRouter({
			routes:[//路由规则数组
				{ path:'/',redirect:'/login' },
				{ path:'/login',component:login },
				{ path:'/register',component:register }
			],
			// 设置激活的类
			linkActiveClass:'myactive'
		})
		var vm = new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			},
			// router:router
			router,
			watch:{
				'$route.path':function(newVal,oldVal){
					if(newVal === '/login'){
					alert("我要登录");
				}else if(newVal === '/register'){
					alert("我想你了，注册");
				}
				}
				
			}
		})
	</script>
</html>