Vue 路由（Router）詳細介紹（切換，傳參，通信······）-有解無憂

前言：

在一個vue專案中，免不了對組件（頁面）進行切換與跳轉，而用 Vue.js + Vue Router 創建單頁應用，感覺很自然：使用 Vue.js ，我們已經可以通過組合組件來組成應用程式，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們，

話不多說，直接開始！！！

準備作業

在使用腳手架vue-cli3創建（vue create projectName）一個vue專案時，可以自定義選擇安裝router，創建完成后目錄中會自動多出router檔案夾與index.js檔案，并自動將路由放置組件中，

如果在創建專案時未安裝，可以使用如下命令進行安裝

npm install vue-router --save

安裝完成后，在src檔案夾下新建router檔案夾，在里面新建index.js檔案

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)      //Vue中使用router插件

const routes = [        //路由配置，配置路由路徑與組件的對應關系
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({    //新建路由實體
  routes
})

export default router         //匯出路由實體，在main.js中匯入使用

main.js需要在vue實體中使用路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'      //匯入路由router
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,      //在vue實體中使用router
  store,
  render: h => h(App)
}).$mount('#app')

準備作業完畢，接下來介紹如何使用路由進行組件（頁面）的跳轉、傳參、通信等，

基本使用

在使用之前，需要先簡單介紹router里面的幾個常用的api，

<router-link>

組件支持用戶在具有路由功能的應用中 (點擊) 導航，通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽.，另外，當目標路由成功激活時，鏈接元素自動設定一個表示激活的 CSS 類名，

<router-link> Props

型別: string | Location
required

表示目標路由的鏈接，當被點擊后，內部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字串或者是描述目標位置的物件，

active-class

型別: string
默認值: "router-link-active"

設定鏈接激活時使用的 CSS 類名，默認值可以通過路由的構造選項 linkActiveClass 來全域配置，

<router-view>

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件，<router-view> 渲染的組件還可以內嵌自己的 <router-view>，根據嵌套路徑，渲染嵌套組件，

<router-view> Props

name

型別: string
默認值: "default"

如果 <router-view>設定了名稱，則會渲染對應的路由配置中 components 下的相應組件，

現在，我們就來使用上面相關屬性實作簡單的路由跳轉

假設有兩個組件Home.vue、About.vue

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style lang="less" scoped>
.home {
  width: 80%;
  height: 50%;
  margin: auto;
  background: rgb(24, 200, 253);
}
</style>

<template>
  <div class="about">
    <span>This is an About page</span>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style lang="less" scoped>
.about {
  width: 80%;
  height: 50%;
  margin: auto;
  background: rgb(250, 147, 12);
}
</style>

在App.vue中使用 <router-link>（其中to為路由配置中對應的路徑，active-class為鏈接激活時的樣式）進行路由導航，使用<router-view>渲染路由匹配到的組件

<template>
  <div id="app">
    <div id="nav">
      <!-- 使用<router-link>進行導航，to為路由配置中的路徑，active-class為鏈接激活時的樣式 -->
      <router-link to="/home" active-class="isActive">Home</router-link>
      <span>|</span>
      <router-link to="/about" active-class="isActive">About</router-link>
      <div class="router-view-content">
        <!-- 使用<router-view>渲染路徑匹配到的視圖組件 -->
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="less">
#app {
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  height: 100%;
  span {
    display: inline-block;
    margin: 10px;
  }
}
.router-view-content {
  width: 500px;
  height: 500px;
  margin: auto;
  background: #4dc08c;
}
.isActive {
  color: red;
}
</style>

頁面展示效果

點擊Home，<router-view />渲染Home組件

點擊About，<router-view />渲染About組件

查看頁面元素，<router-view />渲染路由匹配到的組件

之所以我可以直接進行路由跳轉，是因為我進行了路由路徑配置，

查看router下的index.js

引數決議：

path：路由匹配路徑，即上面<router-link> 中 to 匹配的就是該路徑（也是直接在地址欄輸入的路徑），觀察上面切換Home跟About時地址欄的路徑變化，分別為“/home”與“/about”；

name：標識，也可用與鏈接或編程式跳轉（擴展部分展開）；

component：路由匹配組件，表示該路徑下匹配的組件，使用

component: () => import('../views/Home.vue')

可以實作按需匯入，當然也可以直接匯入所有需要匹配的組件，如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'    //直接匯入所有路由組件，該方式不能實作按需匯入
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

我們想要加一個新的路由組件（可進行路由切換），常規步驟如下：

1、新增一個組件newPage.vue

<template>
  <div class="newPage">
    <span>This is a New page</span>
  </div>
</template>

<script>
export default {
  name: 'newPage'
}
</script>

<style lang="less" scoped>
.newPage {
  width: 80%;
  height: 50%;
  margin: auto;
  background: rgb(193, 204, 207);
}
</style>

2、在router index.js中進行路由配置

3、添加鏈接導航<router-link>

點擊newPage，路由跳轉成功，頁面展示效果

以上就是路由的基本使用，接下來介紹一些擴展內容，

擴展內容

動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件，例如，我們的Home組件，對于所有 id 各不相同的用戶，都要使用這個組件來渲染，那么，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果：

{
  path: '/home/:id',
  name: 'Home',
  component: Home
}

現在呢，像 /Home/foo 和 /Home/bar 都將映射到相同的路由，

一個“路徑引數”使用冒號 : 標記，當匹配到一個路由時，引數值會被設定到 this.$route.params，可以在每個組件內使用，

編程式導航

除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實體方法，通過撰寫代碼來實作，

注意：在 Vue 實體內部，你可以通過 $router 訪問路由實體，因此你可以呼叫 this.$router.push，

想要導航到不同的 URL，則使用 router.push 方法，這個方法會向 history 堆疊添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL，

當你點擊 <router-link> 時，這個方法會在內部呼叫，所以說，點擊 <router-link :to="..."> 等同于呼叫 router.push(...)，

宣告式	編程式
`<router-link :to="...">`	`router.push(...)`

該方法的引數可以是一個字串路徑，或者一個描述地址的物件，例如：

// 字串
router.push('/home')

// 物件
router.push({ path: '/home' })

// 命名的路由
router.push({ name: 'Home', params: { name: 'leo' }})

// 帶查詢引數，變成 /Home?name=leo
router.push({ path: '/home', query: { name: 'leo' }})

//或者使用name方式
router.push({ name: 'Home', query: { name: 'leo' }})

如之前使用的鏈接導航方式

換成編程式導航方式

方式一：字串

changePage(path){
  this.$router.push(path)    //path為一個路徑字串，如"/home"
}

方式二：物件 path 方式

changePage(path){
  this.$router.push({path: path})
}

方式三：物件 name 方式

changePage(name){
  this.$router.push({name: name})  //此處name的值應該與路由配置中的name一致
}

重定向

重定向也是通過 routes 配置來完成，

先看個例子，我們默認進來頁面是沒有匹配到路由組件的，

當前的地址是“/”（#后面部分），查看router index.js里面的routes，我們確實沒有為“/”配置路由，即一進來<router-view>是沒有匹配到需要渲染的組件的，

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import newPage from '../views/newPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/newPage',
    name: 'newPage',
    component: newPage
  }
]

const router = new VueRouter({
  routes
})

export default router

如果我們希望一進來就展示Home組件，可以利用重定向，將“/”重定向到“/home”，

此時進來為“/”時會重定向到“/home”，路由匹配到Home組件，在<router-view>渲染出來，

重定向的目標也可以是一個命名的路由：

路由組件傳參

編程式導航路由組件傳參方式

方式一：通過params傳參

接收引數：用$route.params

方式二：通過query傳參

接收引數：用$route.query

注意：這兩種方式傳參有區別，params方式路徑上不會帶有引數，頁面重繪時獲取不到引數；query方式路徑上面會帶有引數，且頁面重繪時仍然可以獲取到引數，

由于query與params傳參機制不一樣，造成差異，如果要隱藏引數用params，希望強制重繪引數不被清除用query，

HTML5 History模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載，

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面，

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不過這種模式要玩好，還需要后臺配置支持，因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會回傳 404，這就不好看了，

所以呢，你要在服務端增加一個覆寫所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該回傳同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面，

更多詳情請參考

Vue Routerhttps://router.vuejs.org/zh/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378217.html

標籤：其他

上一篇：前端學習者應該知道的前端學習方向

下一篇：Vue-全域事件總線/訊息訂閱與發布