最近vue用的比較多，就想對各種知識做一個小結，比如這個就是路由導航的一個小總結。具體內容如下：

一、<router-link>
<router-link>標籤中的to屬性用來指定路由路徑。
to的型別：string | Location。可以是字串或者是個目標位置物件。
用法如下：

to的本質其實就是呼叫了程式設計式導航的router.push(…)方法。也就是說當你點選 時，router.push(…)會在內部呼叫，點選 等同於呼叫 router.push(…)。

二、程式設計式導航的router.push(location, onComplete?, onAbort?)

三、動態路由匹配
在做路由配置的時候需要這樣寫，如:id,:code ,/test/goods/:id/code/:code：

Vue.use(VueRouter);
let router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test/goods/:id/code/:code",
      name: "goods",
      component: testGoods
    }]
})
 

一個“路徑引數”使用冒號 : 標記。當匹配到一個路由時，引數值會被設定到 this.$route.params，可以在每個元件內使用。
在頁面中，我們這樣獲取引數：

<template>
    <div>
        <h1>goods id: {{$route.params.id}},code:{{$route.params.code}}</h1>
        <h2>網址後面跟了跟路由引數個數匹配的引數，網頁才會被正確顯示，如：http://localhost:8888/test/goods/1001/Code/100001</h2>
        <h2>網址後面沒有引數或引數數量不對，則網頁不會顯示，如：http://localhost:8888/test/goods/或http://localhost:8888/test/goods/1001/</h2>
    </div>
</template>

<script type="text/ecmascript-6">
export default {};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
</style>
 

結果：

需要注意的事：採用params的方式的路由訪問，網址比如帶有完整的引數。如果引數數量不對或者沒有引數，網頁不會正確顯示，如下圖。

而用query的方式（注意看url的寫法），即使沒有引數網頁一樣會顯示，只是讀不出引數而已。

<h1>goods id: {{$route.query.id}},code:{{$route.query.code}}</h1>

對帶引數的query（注意看url的寫法），結果如下：

再看看匹配模式：