vue vue-router 使用注意事項

1、$router和$route區別

this.$router 訪問路由器，實現路由的跳轉等功能。

this.$route 實現訪問當前路由，$route.query (如果 URL 中有查詢參數)。如：

export default {
  computed: {
    username () {
      // 我們很快就會看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

2、響應路由的變化，watch $route對象

const User = { template: '...', watch: { '$route' (to, from) { // 對路由變化作出響應...
 } } }

注意：是監測路由參數變化如/user/foo 導航到 /user/bar，路由的變化時監測不到的。

同理beforeRouteUpdate 也僅僅監測路由參數變化。beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。

3、編程式導航

// 字符串
router.push('home') // 對象
router.push({ path: 'home' }) // 命名的路由，變成 /user/123
router.push({ name: 'user', params: { userId: 123 }})

router.push({ path: `/user/${userId}` }) // -> /user/123

// 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

4、$route 對象

https://router.vuejs.org/zh/api/#路由對象屬性

主要使用的$route.query。獲取查詢參數。