Vue教程11：利用JS實現路由跳轉，路由監聽和導航守衛

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

利用JS實現路由跳轉

代碼示例：/lesson10/01. vue-router 最基本的路由.html

使用this.$router.push方法能夠實現路由跳轉，this.$router.replace實現替換當前路由。 兩個方法的第一個參數可爲string類型的路徑，或者能夠經過對象將相應參數傳入。

經過this.$router.go(n)方法能夠實現路由的前進後退，n表示跳轉的個數，正數表示前進，負數表示後退。

若是隻想實現前進後退能夠使用this.$router.forward()（前進一頁），以及this.$router.back()（後退一頁）。

JavaScript：

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index/:id', // 路由的路徑
      name: 'index',  // 路由名稱，可選屬性，定義後能夠用其實現跳轉
      component: { // 路由顯示的組件
        template: '<div>首頁：{{$route.params.id}}</div>'  // 組件模板
      }
    },
    {
      path: '/news/:id/', // 經過路由傳參
      name: 'news',
      component: {
        template: '<div>新聞：{{$route.params.id}}</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>用戶：{{$route.query.userId}}</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {

  },
  // 將路由添加到Vue中
  router,
  methods: {
    fn1() {
      // 經過路由名稱跳轉，配置params參數。
      this.$router.replace({ name: 'index', params: { id: Math.random() } });
    },
    fn2() {
      // 直接跳轉路由地址，參數直接帶在路徑中。
      this.$router.push(`/news/${Math.random()}`);
    },
    fn3() {
      // 經過路由地址進行跳轉，配置query參數。
      this.$router.push({ path: '/user', query: { userId: 321 } });
    },
    fn4() {
      console.log(this.$router)
      this.$router.go(1)
    },
    fn5() {
      this.$router.forward()
    },
    fn6() {
      this.$router.go(-1)
    },
    fn7() {
      this.$router.back()
    },
  }
})
複製代碼

HTML：

<div id="app">
  跳轉按鈕，經過JS跳轉<br />
  <div class="links">
    <input type="button" value="跳轉到首頁" @click="fn1()">
    <input type="button" value="跳轉到新聞" @click="fn2()">
    <input type="button" value="跳轉到用戶" @click="fn3()"><br />
    <input type="button" value="前進一頁" @click="fn4()">
    <input type="button" value="前進一頁" @click="fn5()">
    <input type="button" value="後退一頁" @click="fn6()">
    <input type="button" value="後退一頁" @click="fn7()">
  </div>
  下面是頁面內容<br />
  <!-- 路由的內容顯示在router-view標籤中 -->
  <router-view></router-view>
</div>
複製代碼

經過watch實現路由監聽

代碼示例：/lesson10/02. vue-router 路由監聽和守衛.html

經過watch屬性設置監聽$route變化，達到監聽路由跳轉的目的。

watch: {
  // 監聽路由跳轉。
  $route(newRoute, oldRoute) {
    console.log('watch', newRoute, oldRoute)
  },
},
複製代碼

導航守衛

代碼示例：/lesson10/02. vue-router 路由監聽和守衛.html

vue-router支持3種路由守衛，每一個守衛參數中的next方法都必須被調用，不然沒法進入下一步操做，會阻止路由的跳轉，也能夠在next方法中傳入路由跳轉參數string | object，將路由跳轉到不一樣地址。

1. 全局守衛 router.beforeEach((to, from, next) => {})
   router.beforeResolve((to, from, next) => {})
   router.afterEach((to, from) => {})

2. 路由守衛 beforeEnter(to, from, next) {}

3. 組件內守衛 beforeRouteEnter(to, from, next) {}
   beforeRouteUpdate(to, from, next) {}
   beforeRouteLeave(to, from, next) {}

路由跳轉時守衛的運行順序以下：

1. 進入一個新路由 beforeEach => beforeEnter => beforeRouteEnter => beforeResolve => afterEach

2. 當前路由下跳轉，如替換路由參數 beforeEach => beforeRouteUpdate => beforeResolve => afterEach

3. 離開當前路由 beforeRouteLeave => beforeEach => beforeResolve => afterEach

開發中能夠經過不一樣的守衛處理邏輯。