vue-router 2.0一些區別

學習vue-router 2.0的過程當中，有些很容易混淆，現作記錄

$route和$router

1、$route

1.1 一個 route object（路由信息對象） 表示當前激活的路由的狀態信息，包含了當前 URL 解析獲得的信息，還有 URL 匹配到的 route records（路由記錄）。

route object 是 immutable（不可變） 的，每次成功的導航後都會產生一個新的對象。
1.2 route object 出如今多個地方:
(1)在組件內，即 this.$route
(2)在 $route 觀察者回調內 router.match(location) 的返回值
(3)導航守衛的參數：

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息對象
})
scrollBehavior 方法的參數:
    const router = new VueRouter({
      scrollBehavior (to, from, savedPosition) {
        // to 和 from 都是 路由信息對象
  }
})

**路由信息對象：即$router會被注入每一個組件中，能夠利用它進行一些信息的獲取**
**1.$route.path**
字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。
**2.$route.params**
一個 key/value 對象，包含了 動態片斷 和 全匹配片斷，
若是沒有路由參數，就是一個空對象。
**3.$route.query**
一個 key/value 對象，表示 URL 查詢參數。
例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，
若是沒有查詢參數，則是個空對象。
**4.$route.hash**
當前路由的 hash 值 (不帶 #) ，若是沒有 hash 值，則爲空字符串。
**5.$route.fullPath**
完成解析後的 URL，包含查詢參數和 hash 的完整路徑。
**6.$route.matched**
數組，包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象。
**7.$route.name    當前路徑名字**

2、$router

路由實例即 建立 router 實例，而後傳route 配置
const router = new VueRouter({
  routes // （縮寫）至關於 routes: routes
})

注意：在 Vue 實例內部，你能夠經過 $router 訪問路由實例。如1：this.$router.push 如2：在hmtl頁面渲染路由 v-for="(item,index) in $router.options.routes

2.1 全局註冊的路由Vue.use(VueRouter)

// 字符串
this.$router.push('home')
// 對象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其實和<router-link :to="...">是等同的。
注意：push方法的跳轉會向 history 棧添加一個新的記錄，當咱們點擊瀏覽器的返回按鈕時能夠看到以前的頁面。

2.2 router.replace

push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面，
不會向 history 棧添加一個新的記錄

<router-link to="/05" replace>05</router-link>