路由，其實就是指向的意思，當我點擊頁面上的home  按鈕時，頁面中就要顯示home的內容，如果點擊頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕  => home 內容， about按鈕 => about 內容，也可以說是一種映射。 所以在頁面顯示中，有兩個部分，一個是需要點擊的部分，一個是點擊之后，顯示點擊內容的部分。

點擊之后，怎么做到正確的對應，比如，我點擊home 按鈕，頁面中怎么才能顯示home的內容。這就要在js 文件中配置路由。

路由中有三個基本的概念 route, routes, router。

1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕  => home內容， 這是一條route,  about按鈕 => about 內容， 這是另一條路由。

2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home內容 }， { about按鈕 => about 內容}]

3， router 是一個機制，相當于一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的，當真正來了請求，怎么辦？ 就是當用戶點擊home 按鈕的時候，怎么辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 內容，所以頁面中就顯示了 　　home 內容。

4，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容全部隱藏，反之也是一樣。客戶端路由有兩種實現方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的內容來實現的

在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是組件化的，我們只要把路徑和組件對應起來就可以了，然后在頁面中把組件渲染出來。

1， 頁面實現（html模版中）

在vue-router中, 我們也可以看到它定義了兩個標簽<router-link> 和<router-view>。 <router-link> 就是定義頁面中點擊的部分，<router-view> 就是點擊后，顯示內容的部分。所以 <router-link> 還有一個非常重要的屬性 to， 它定義 點擊之后，要到哪個路徑下 ， 如：<router-link  to="/home">Home</router-link>

2， js 中配置路由

首先要定義route,  一條路由的實現。它是一個對象，最基本的一條路由由兩個部分組成： path: component.  path 指路徑，component 指的是組件。如：{path:'/home', component: home}

我們這里有兩條路由，組成一個routes:

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

最后創建router 對路由進行管理，它是由構造函數 new vueRouter() 創建，接受routes 參數。

const router = new VueRouter({   routes // short for routes: routes})

配置完成后，把router 實例注入到 vue 根實例中,就可以使用路由

const app = new Vue({ router}).$mount('#app')

執行過程：當用戶點擊 router-link 標簽時，會去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}  path 一一對應，從而找到了匹配的組件， 最后把組件渲染到 <router-view> 標簽。所有的這些實現才是基于hash 實現的。

vue-cli 創建一個項目體驗一下, 當然不要忘記安裝vue-router

1, 在src 目錄下新建兩個組件，home.vue 和 about.vue

<template>  <div>    <h1>home</h1>    <p>{{msg}}</p>  </div></template><script>  export default {    data () {      return {        msg: "我是home 組件"      }    }  }</script>

<template>  <div>    <h1>about</h1>    <p>{{aboutMsg}}</p>  </div></template><script>  export default {    data () {      return {        aboutMsg: '我是about組件'      }    }  }</script>

2, 在 App.vue中 定義<router-link > 和 </router-view> 

<template> <div id="app">  <img src="./assets/logo.png">  <header>  <!-- router-link 定義點擊后導航到哪個路徑下 -->   <router-link to="/home">Home</router-link>   <router-link to="/about">About</router-link>  </header>  <!-- 對應的組件內容渲染到router-view中 -->  <router-view></router-view>   </div></template><script>export default { }</script>

3,  在 src目錄下再新建一個router.js 定義router, 就是定義 路徑到 組件的 映射。

import Vue from "vue";import VueRouter from "vue-router";// 引入組件import home from "./home.vue";import about from "./about.vue";// 要告訴 vue 使用 vueRouterVue.use(VueRouter);const routes = [  {    path:"/home",    component: home  },  {    path: "/about",    component: about  }]var router = new VueRouter({  routes})export default router;

4， 把路由注入到根實例中，啟動路由。這里其實還有一種方法，就像store 注入到根實例中，我們可以在main.js中引入路由，注入到根實例中。

import Vue from 'vue'import App from './App.vue'// 引入路由import router from "./router.js"new Vue({ el: '#app', router, // 注入到根實例中 render: h => h(App)})

5， 這時點擊頁面上的home 和about 可以看到組件來回切換。但是有一個問題，當首次進入頁面的時候，頁面中并沒有顯示任何組件。我們想讓頁面一加載進來就顯示home頁面，這需要重定向，所謂重定向，其實就是重新給它指定一個方向，比如當用戶點擊home 的時候，我們讓它指向about.

這用到了redirect 配置。剛進入頁面的時候，它的路徑是 '/', 所以重新定義到home

const routes = [  {    path:"/home",    component: home  },  {    path: "/about",    component: about  },  // 重定向  {    path: '/',     redirect: '/home'   }]

6， 當我們打開瀏覽器的控制臺，可以看到路由時組件的切換。

首先看到 router-link 標簽渲染成了 a 標簽，to 屬性變成了a 標簽的 href 屬性，這時就明白了點擊跳轉的意思。router-view 標簽渲染成了我們定義的組件。可以對比一下app.vue 中的標簽和控制臺中的標簽

 動態路由

官網給的例子是，不同的用戶（就是用戶的id不同），它都會導航到同一個user  組件中。這樣我們在配置路由的時候，就不能寫死, 就是路由中的path屬性，不能寫死。如 path： “/home”,只有是home的時候，才能顯示home 組件，執行的是嚴格匹配。導航到 user 組件，路徑中肯定有user,

id 不同，那就給路徑一個動態部分來匹配不同的id. 動態部分 以 : 開頭，那么路徑就變成了 /user/:id, 這條路由就可以這么寫： { path:"/user/:id", component: user }.

再定義一個user組件，頁面中添加兩個router-link 用于導航， router.js中添加路由配置。user組件隨便寫一個就好了。

app.vue 更改如下：

<template> <div id="app">  <img src="./assets/logo.png">  <header>   <router-link to="/home">Home</router-link>   <router-link to="/about">About</router-link>   <!-- 增加兩個到user組件的導航，可以看到這里使用了不同的to屬性 -->   <router-link to="/user/123">User123</router-link>   <router-link to="/user/456">User456</router-link>  </header>  <router-view></router-view>   </div></template>

router.js 更改如下：

const routes = [  {    path:"/home",    component: home  },  {    path: "/about",    component: about  },  /*新增user路徑，配置了動態的id*/  {    path: "/user/:id",    component: user  },  {    path: '/',     redirect: '/home'   }]

在動態路由中，如果我們想知道路由是從哪里過來的，就是獲取到動態部分怎么辦？ 其實，當整個vue-router 注入到根實例后，在組件的內部，我們是可以通過this.$route.params 來獲得這個動態部分的。它是一個對象，屬性名，就是路徑中定義的動態部分 id, 屬性值就是router-link中to 屬性中的動態部分，如123。 在組件中，如果想要獲取到state 中的狀態，我們可以用computed 屬性，在這里也是一樣，在組件中，定義一個computed 屬性dynamicSegment， user 組件修改如下：

<template>  <div>    <h1>User</h1>    <div>我是user組件, 動態部分是{{dynamicSegment}}</div>  </div></template><script>  export default {    computed: {      dynamicSegment () {        return this.$route.params.id      }    }  }</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。