Vue监听路由(vue-router)变化

Vue监听路由(vue-router)变化教程

在 Vue 中，我们可以使用 watch 来监听路由对象的 $route.path 来监听路由的变化。

Vue监听路由(vue-router)变化详解

语法

<body>
	<div id="app">
		<router-link to="/login">登录</router-link>
		<router-link to="/register">注册</router-link>
		<router-view></router-view>
	</div>
</body>
<script type="text/javascript">
	var login = {
		template: '<h1>登录组件</h1>'
	}
	var register = {
		template: '<h1>注册组件</h1>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{path: "/", redirect: '/login'},
			{path: "/login", component: login},
			{path: "/register", component: register}
		]
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj,
        watch: {
        	'$route.path': function(newVal, oldVal){
        		console.log(newVal + ' ---------- ' + oldVal)
        	}
        } 
    });
</script>

说明

我们直接在 Vue 对象实例上，通过 watch 监听路由对象的 $route.path 来达到监听路由变化的目的。

案例

Vue监听路由(vue-router)变化

通过 watch，监听路由变化

<!DOCTYPE html>
<html>
<head>
	<title>Vue监听路由(vue-router)变化</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<style>
	.myactive{
		color:red;
		font-weight: 100;
		font-style: italic;
		font-size: 20px;
		text-decoration: underline;
	}
</style>
<body>
	<div id="app">
		<router-link to="/login">登录</router-link>
		<router-link to="/register">注册</router-link>
		<router-view></router-view>
	</div>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var login = {
		template: '<h1>登录组件</h1>'
	}
	var register = {
		template: '<h1>注册组件</h1>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{path: "/", redirect: '/login'},
			{path: "/login", component: login},
			{path: "/register", component: register}
		],
		linkActiveClass:'myactive'
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj,
        watch: {
        	'$route.path': function(newVal, oldVal){
        		console.log(newVal + ' ---------- ' + oldVal)
        	}
        } 
    });
</script>
</html>

程序运行后，浏览器显示效果如下：

13 vue router watch.png

当我们点击，登录或者注册按钮，切换路由的时候，控制台输出了路由变化前后的具体的路由路径。

Vue监听路由(vue-router)变化总结

在 Vue 中，我们可以使用 watch 来监听路由对象的 $route.path 来监听路由的变化。