Vue中監(jiān)聽路由參數(shù)變化的幾種方式

這篇具有很好參考價值的文章主要介紹了Vue中監(jiān)聽路由參數(shù)變化的幾種方式。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一. 路由監(jiān)聽方式：通過 watch 進行監(jiān)聽

1. 監(jiān)聽路由從哪兒來到哪兒去

2. 監(jiān)聽路由變化獲取新老路由信息

3.??監(jiān)聽路由變化觸發(fā)方法

4. 監(jiān)聽路由的 path 變化

5.?監(jiān)聽路由的 path 變化, 使用handler函數(shù)

6. 監(jiān)聽路由的 path 變化，觸發(fā)methods里的方法?

二. 路由監(jiān)聽方式：key是用來阻止“復(fù)用”的

三. 路由監(jiān)聽方式：通過vue-router的鉤子函數(shù)

1. 組件內(nèi)監(jiān)聽

2. 全局監(jiān)聽路由

?? 參考資料

Vue中監(jiān)聽路由參數(shù)變化的幾種方式,Vue.js學(xué)習(xí)筆記,javascript,vue路由監(jiān)聽,監(jiān)聽路由方法,Vue路由監(jiān)聽方式,vue監(jiān)聽

vue頁面開發(fā)中，我們經(jīng)常需要根據(jù)路由的變化去實現(xiàn)一些操作，那么vue.js中如何監(jiān)聽路由的變化呢？監(jiān)聽路由變化的方法都有哪些？這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教?

——???vue中路由參數(shù)的變化監(jiān)聽，這里總結(jié)了常用的幾種方式 ??——

一. 路由監(jiān)聽方式：通過 watch 進行監(jiān)聽

1. 監(jiān)聽路由從哪兒來到哪兒去

返回 “從哪里來” 和 “哪里去”?的路由信息

// 方式1、監(jiān)聽路由 $route 變化
export default{
? ? watch: { // 監(jiān)聽，當路由發(fā)生變化的時候執(zhí)行
? ? ? ? $route(to, from){
? ? ? ? ? ? console.log('路由變化了')
? ? ? ? ? ? console.log('當前頁面路由：' + to);
? ? ? ? ? ? console.log('上一個路由：' + from);
            // console.log(from.path); // 從哪來
            // console.log(to.path); // 到哪去
? ? ? ? },
? ? }
}

2. 監(jiān)聽路由變化獲取新老路由信息

返回 “新” “老” 路由信息

// 方式2、監(jiān)聽路由 $route 變化, 使用handler函數(shù)
export default{
? ? watch: { // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? ? ? '$route': { // $route可以用引號，也可以不用引號
? ? ? ? ? ? handler(to, from){
? ? ? ? ? ? console.log('路由變化了')
? ? ? ? ? ? console.log('當前頁面路由：' + to); //新路由信息
? ? ? ? ? ? console.log('上一個路由：' + from); //老路由信息
? ? ? ? ? ? },
? ? ? ? ? ? deep: true, // 深度觀察監(jiān)聽
? ? ? ? ? ? immediate: true, // 第一次初始化渲染就可以監(jiān)聽到
? ? ? ? }
? ? }
}

如果我們需要在最初綁定值的時侯，也執(zhí)行監(jiān)聽函數(shù)，則就需要用到immediate屬性。

?? 當設(shè)置immediate屬性為true時，無論值是否發(fā)生改變，時刻都會監(jiān)聽；

?? 當設(shè)置immediate屬性為false時，常規(guī)用法，只有值發(fā)生改變才會監(jiān)聽。

參考：Vue中watch(監(jiān)聽器)的用法詳解(通俗易懂，簡單明了)

3.??監(jiān)聽路由變化觸發(fā)方法

// 方式3、監(jiān)聽路由 $route 變化，觸發(fā)methods里的方法
export default{
  watch: { // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
    '$route':'getPath'
  },
  methods: {
    getPath(){
    console.log(this.$route.path);
    }
 
  }

}

4. 監(jiān)聽路由的 path 變化

// 方式4、監(jiān)聽路由的 path 變化
export default{
? ? watch: { // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? ? ? '$route.path'(toPath, fromPath){
? ? ? ? ? ? console.log('路由變化了')
? ? ? ? ? ? console.log('當前頁面路由地址：' + toPath)
? ? ? ? ? ? console.log('上一個路由地址：' + fromPath)
? ? ? ? ?},
? ? }
}

5.?監(jiān)聽路由的 path 變化, 使用handler函數(shù)

// 方式5、監(jiān)聽路由的 path 變化, 使用handler函數(shù)
export default{
? ? watch: { // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? ? ? '$route.path': {
? ? ? ? ? ? handler(toPath, fromPath){
? ? ? ? ? ? ? ? console.log('路由變化了')
? ? ? ? ? ? ? ? console.log('當前頁面路由地址：' + toPath)
? ? ? ? ? ? ? ? console.log('上一個路由地址：' + fromPath)
? ? ? ? ? ? },
? ? ? ? ? ? deep: true, // 深度監(jiān)聽
? ? ? ? ? ? immediate: true, // 第一次初始化渲染就可以監(jiān)聽到
? ? ? ? }
? ? }
}

6. 監(jiān)聽路由的 path 變化，觸發(fā)methods里的方法?

// 方式6、監(jiān)聽路由的 path 變化,觸發(fā)methods里的方法
export default{
? ? watch: { // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? ? ? '$route.path': 'getpath'
? ? },
? ? methods: {
? ? ? ? getpath(){
? ? ? ? ? ? console.log('路由變化了')
? ? ? ? }
? ? }
}

二. 路由監(jiān)聽方式：key是用來阻止“復(fù)用”的

Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復(fù)用它們”。只需添加一個具有唯一值的 key 屬性即可(Vue文檔原話)

<router-view :key="key"></router-view>
computed: {
  key(){
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

使用computed屬性和Date()可以保證每一次的key都是不同的，這樣就可以如愿刷新數(shù)據(jù)了。

三. 路由監(jiān)聽方式：通過vue-router的鉤子函數(shù)

1. 組件內(nèi)監(jiān)聽

? 如何在組件中監(jiān)聽路由參數(shù)的變化？?

當使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。

因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。

那如果我們要在組件中監(jiān)聽路由參數(shù)的變化，就只能通過watch (監(jiān)測變化) $route 對象，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。

方式一: 通過watch 監(jiān)聽 $route
?
const User = {
??template: '...',
??watch: {
??? $route(to, from) {
??? ? // 對路由變化作出響應(yīng)...
??? }
??}
}
方式二：通過組件內(nèi)的導(dǎo)航守衛(wèi)

beforeRouteUpdate ,（和created(){}生命周期函數(shù)同級別)
const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

? 通過vue-router的組件內(nèi)鉤子函數(shù)beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave進行監(jiān)聽

示例1：

export default{
    // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? beforeRouteEnter(to, from, next){
      // 在渲染該組件的對應(yīng)路由被確認前調(diào)用這個鉤子，
      // 不！能！獲取組件實例 `this`
      // 因為當鉤子執(zhí)行前(也就是說，我們使用的是進入路由之前的鉤子)，那時組件實例還沒被創(chuàng)建，所以不能獲取this，自然這里就不能使用this
? ? ? ? console.log(this) // 結(jié)果為：undefined
? ? ? ? console.log('beforeRouteEnter')
? ? ? ? next()
? ? },
    // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? beforeRouteUpdate(to, from, next){
      // 在當前路由改變，但是該組件被復(fù)用時調(diào)用
      // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
      // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
      // 可以訪問組件實例 `this`
? ? ? ? console.log(this) // 可以訪問this
? ? ? ? console.log('beforeRouteUpdate')
? ? ? ? next()
? ? },
    // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
? ? beforeRouteLeave(to, from, next){
? ? ? ? // 導(dǎo)航離開當前路由的時候被調(diào)用，this可以被訪問到
? ? ? ? console.log(this) // 可以訪問組件實例 `this`
? ? ? ? console.log('beforeRouteLeave')
? ? ? ? next()
? ? },
}

示例2：?

<script>
  // 引入 Tabbar組件
  import mTabbar from './components/Tabbar'
  import mTabbarItem from './components/TabbarItem'
  // 引入 vuex 的兩個方法
  import {mapGetters, mapActions} from 'vuex'
  
  export default {
    name: 'app',
    // 計算屬性
    computed:mapGetters([
      // 從 getters 中獲取值
      'tabbarShow'
    ]),

    // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
    watch:{
      $route(to,from){
        if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' ||
         to.path == '/Time' || to.path == '/Mine'){
          /**

           * $store來自Store對象

           * dispatch 向 actions 發(fā)起請求

           */
          this.$store.dispatch('showTabBar');
        }else{
          this.$store.dispatch('hideTabBar');
        }
      }
    },

    beforeRouteEnter (to, from, next) {
      // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
      // 不！能！獲取組件實例 `this`
      // 因為當鉤子執(zhí)行前，組件實例還沒被創(chuàng)建
    },

    beforeRouteUpdate (to, from, next) {
      // 在當前路由改變，但是該組件被復(fù)用時調(diào)用
      // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
      // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
      // 可以訪問組件實例 `this`
    },

    beforeRouteLeave (to, from, next) {
      // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
      // 可以訪問組件實例 `this`
    },

    components:{
      mTabbar,
      mTabbarItem
    },

    data() {
      return {
        select:"Building"
      }
    }
  }
</script>

2. 全局監(jiān)聽路由

? 通過vue-router的全局鉤子函數(shù)beforeEach——this.$router.beforeEach

// 方式1、在App.vue的create中進行全局路由監(jiān)聽
export default ?{
? ? name: ?'App',
? ? created() {
? ? ? ? this.$router.beforeEach((to, from, next) => {
? ? ? ? ? ? console.log(to);
? ? ? ? ? ? console.log(from);
? ? ? ? ? ? next()
? ? ? ? })
? ? }
}

// 方式2、在路由文件（/router/index.js）中進行全局路由監(jiān)聽
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let routes = [
? ? ?{
? ? ? ?path: '/login',
? ? ? ?component: resolve => require(['@/views/login'], resolve),
? ? ?},
]

let router = new Router({
? ? mode: 'history', // 去掉 url 中的 #
? ? scrollBehavior: () => ({ y: 0 }),
? ? base: process.env.VUE_APP_BASE_DOMAIN,
? ? routes,
})

router.beforeEach((to, from, next) => {
? ? console.log(to);
? ? console.log(from);
? ? next()
})

export {
? ? routes
? ? router
}

?? 參考資料

Vue監(jiān)聽路由變化的幾種方式小結(jié)
Vue.js怎么監(jiān)聽路由變化
Vue路由監(jiān)聽的方式
Vue幾種監(jiān)聽路由變化的方式

Vue中監(jiān)聽路由參數(shù)變化的幾種方式,Vue.js學(xué)習(xí)筆記,javascript,vue路由監(jiān)聽,監(jiān)聽路由方法,Vue路由監(jiān)聽方式,vue監(jiān)聽文章來源地址http://www.zghlxwxcb.cn/news/detail-632408.html