引入router

this.$router 和 router 使用起來完全一樣。我們使用 this.$router 的原因是我們並不想在每個獨立需要封裝路由的組件中都導入路由
可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由：

   this.$router.go(-1)
   this.$router.push(‘/‘)
   this.$route.params.username

動態路由匹配

/user/foo 和 /user/bar 都將映射到相同的路由:

    { path: ‘/user/:id‘, component: User }

   /user/:username/post/:post_id--->/user/evan/post/123--->$route.params:{ username: ‘evan‘, post_id: 123 }
 

對應的值都會設置到 $route.params 中

從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。

想對路由參數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 對象：
watch: { ‘$route‘ (to, from) { // 對路由變化作出響應... } }
或者使用 beforeRouteUpdate 守衛：

嵌套路由

當 /user/:id/profile 匹配成功， UserProfile 會被渲染在 User 的

   { path: ‘/user/:id‘, component: User,
        children: [
            {
               path: ‘profile‘,
               component: UserProfile
            },

js跳轉頁面

router.push(‘home‘)  // 字符串

router.push({ path: ‘home‘ })  // 對象

router.push({ name: ‘user‘, params: { userId: 123 }})  // 命名的路由

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

vue路由文檔筆記