需求
上一篇章使用watch组件经过监听文本框的参数变化，实现了名称拼接的案例。这种业务使用事件监听均可以处理，可是若是须要监听网页的URL地址变化，这样事件监听确定是作不了的。那么此时就可使用watch来实现了。html
那么这个实现的思路该怎么处理呢？vue
这时候能够监听路由的对象this.$route.path变化来处理。web
示例
1.首页编写路由映射登陆以及注册两个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>
<style>
.router-link-active,.myactive{
color: #0056B3;
font-weight: 700;
text-decoration: none;
}
/* 设置动画效果 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(9.375rem);
}
.v-enter-active, .v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login?id=10&name=lisi&age=33" tag="span">登录</router-link>
<router-link to="/register/10/zhangsan/55">注册</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
// 1. 定义 (路由) 组件。
// 建立登录组件login
var login = {
template: "<h3>登录组件, id:{{$route.query.id}}, name:{{$route.query.name}}, age:{{$route.query.age}}</h3>",
created(){
console.log(this.$route);
console.log(this.$route.query.id);
console.log(this.$route.query.name);
console.log(this.$route.query.age);
}
}
// 建立注册组件register
var register = {
template: "<h3>注册组件,id:{{$route.params.id}}, name:{{$route.params.name}}, age:{{$route.params.age}}</h3>",
}
// 2. 定义路由
var routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register/:id/:name/:age', component: register }
]
// 3. 建立 router 实例，而后传 `routes` 配置
var router = new VueRouter({
routes, // (缩写) 至关于 routes: routes
linkActiveClass: "myactive", // 自定义选中的class
})
// 建立vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{},
// 注册局部组件，注意：下面使用vue-router的话，不须要在这里注册组件
components:{},
// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，而后展现对应的组件
router, // 等价于 router: router
})
</script>
</body>
</html>
2.浏览器查看效果
能够看到已经实现了点击组件的切换了，那么下面来监听路由this.$route.path的变化。vue-router
3.使用watch监听$this.route.path路径变化，根据不一样的路由，打印不一样的信息
watch: {
// 监听路由变化
"$route.path": function(newVal, oldVal) {
console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
}
}
首先在浏览器查看一下打印的路径信息，以下：浏览器
根据上面打印出来的路径，那么我只要作个if判断能够设置不一样的路径打印不一样的信息了，以下：微信
那么在浏览器显示打印的信息以下：app
那么从效果来看，已经能够根据不一样的路径打印对应的信息内容了。编辑器
「更多精彩原创Devops文章，快来关注个人公众号：【Devops社群】 吧：」flex
交流QQ群：动画
点击下面，查看更多Vue系列文章
本文分享自微信公众号 - DevOps社群（DevOpsCommunity）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。