需求
上一篇章使用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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。