一、用name傳遞引數

兩步完成用name傳值並顯示在模板裡：

1. 在路由檔案src/router/index.js裡配置name屬性。

   1 2 3 4 5 6 7

   routes: [     {       path: '/',       name: 'Hello',       component: Hello     } ]

2. 模板裡(src/App.vue)用$router.name的形勢接收，比如直接在模板中顯示：

   1	<p>{{ $router.name}}</p>

二、通過<router-link> 標籤中的to傳參

也許你也會覺的上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用<router-link>標籤中的to屬性進行傳參，需要您注意的是這裡的to要進行一個繫結，寫成:to。先來看一下這種傳參方法的基本語法：

這裡的to前邊是帶冒號的，然後後邊跟的是一個物件形勢的字串.

• name：就是我們在路由配置檔案中起的name值。
• params：就是我們要傳的引數，它也是物件形勢，在物件裡可以傳遞多個值。

瞭解基本的語法後，我們改造一下我們的src/App.vue裡的<router-link>標籤,我們把hi1頁面的<router-link>進行修改。

把src/reouter/index.js檔案裡給hi1配置的路由起個name,就叫hi1.

最後在模板裡(src/components/Hi1.vue)用$route.params.username進行接收.

三:冒號的形式傳遞引數

1. 在配置檔案裡以冒號的形式設定引數。我們在/src/router/index.js檔案裡配置路由。

   1 2 3 4

   {     path:'/params/:newsId/:newsTitle',      component:Params }

   我們需要傳遞引數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置檔案裡制定了這兩個值。
2. 在src/components目錄下建立我們params.vue元件，也可以說是頁面。我們在頁面裡輸出了url傳遞的的新聞ID和新聞標題。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <template>     <div>         <h2>{{ msg }}</h2>         <p>新聞ID：{{ $route.params.newsId}}</p>         <p>新聞標題：{{ $route.params.newsTitle}}</p>     </div> </template> <script> export default {   name: 'params',   data () {     return {       msg: 'params page'     }   } } </script>

3. 在App.vue檔案里加入我們的<router-view>標籤。這時候我們可以直接利用url傳值了。

   1	<router-link to="/params/198/jspang website is very good">params</router-link> |

四、傳統路由跳轉(要解析vue變數:to)

五、程式設計是導航

前進與後退

this.$router.go(-1) 和 this.$router.go(1)

跳轉

this.$router.push('/xxx ')

eg:

<button @click="goHome">回到首頁</button>