vue 路由、頁面傳參

一、頁面跳轉及傳值

• （1）經過router-link進行跳轉

• （2）經過編程導航進行路由跳轉

（1）使用 <router-link>映射路由 home.vue 中引入了 header.vue 組件，其中含有導航菜單。 當點擊導航菜單的時候，會切換 home.vue 中 <router-link> 中的內容，這種只須要跳轉頁面，不須要添加驗證方法的狀況，可使用 <router-link> 來實現導航的功能：

<template>
  <header class="header">
    <router-link id="logo" to="/home/first">{{logo}}</router-link>
    <ul class="nav">
      <li v-for="nav in navs">
        <router-link :to="nav.method">{{nav.title}}</router-link>
      </li>
    </ul>
</template>
複製代碼

在編譯以後，<router-link>會被渲染爲<a> 標籤， to 會被渲染爲 href，當 <router-link>被點擊的時候，url 會發生相應的改變，若是使用v-bind 指令，還能夠在 to 後面接變量，配合 v-for 指令能夠渲染導航菜單。

若是對於全部 id 各不相同的用戶，都要使用 home 組件來渲染，能夠在 routers.js 中添加動態參數：

{ 
    path: '/home/:id',
    component: Home
}
複製代碼

這樣 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都會映射到 Home 組件 而後還可使用 $route.params.id 來獲取到對應的 id。

（2）編程式導航

實際狀況下，有不少按鈕在執行跳轉以前，還會執行一系列方法，這時能夠用 this.$router.push(location) 來修改 url，完成跳轉。

<div>
  <button class="register">註冊</button>
  <button class="sign" @click="goFirst">登陸</button>
</div>

methods: {
  goFirst() {
    this.$router.push({path: 'home/first'})
  }
}
複製代碼

push 後面能夠是對象，也能夠是字符串：

// 字符串
this.$router.push('/home/first')
複製代碼

// 對象
this.$router.push({ path: '/home/first' })
複製代碼

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
複製代碼

params: 至關於 post 請求，請求參數不會體如今地址欄中。

這種方法會出現以下問題：

若是子頁面點擊【刷新】按鈕時，剛纔傳過來的參數並不會同步。由於參數沒有同步到網頁地址欄中。可是若是要讓他體如今地址欄中，能夠在配置路由時，寫在path屬性中。 如：

{
  path: 'management/target-pv/pv-list/:userId',
  component: TARGET_PV_LIST,
  name: 'home'
}
瀏覽器效果以下：
http://localhost:8081/scmis/view/management/target-pv/pv-list/5
複製代碼

這樣就解決了刷新的問題。

另外還有一種傳參形式：query。

query: 至關於 get 請求，請求參數會體如今地址欄中。

this.$router.push({name: 'home', query: {}});
瀏覽器效果以下：
http://localhost:8081/scmis/view/management/target-pv/pv-list?id=5
複製代碼

若是傳過來的是一個比較長的參數，咱們既不想讓他在url中顯示，又想在刷新的時候參數不丟。能夠將傳過來的參數存起來如本地緩存（localStorage、session等），這樣在每次刷新的時候直接從本地緩存中取出。

二、this.$router 和this.$route有何區別？

上面提到的編程式導航中用this.$router.push()來改變路由，用this.$route.params.userId來獲得參數值，那麼這兩個this.$router和this.$route看起來很是相近，到底有什麼差異呢？

在控制檯打印二者能夠很明顯的看出二者的一些區別，如圖：

1.$router爲VueRouter實例，想要導航到不一樣URL，則使用$router.push方法。

2.$route爲當前router跳轉對象，裏面能夠獲取name、path、query、params等