詳解vue-router基本使用

路由，其實(shí)就是指向的意思，當(dāng)我點(diǎn)擊頁(yè)面上的home  按鈕時(shí)，頁(yè)面中就要顯示home的內(nèi)容，如果點(diǎn)擊頁(yè)面上的about 按鈕，頁(yè)面中就要顯示about 的內(nèi)容。Home按鈕  => home 內(nèi)容， about按鈕 => about 內(nèi)容，也可以說(shuō)是一種映射。 所以在頁(yè)面顯示中，有兩個(gè)部分，一個(gè)是需要點(diǎn)擊的部分，一個(gè)是點(diǎn)擊之后，顯示點(diǎn)擊內(nèi)容的部分。

點(diǎn)擊之后，怎么做到正確的對(duì)應(yīng)，比如，我點(diǎn)擊home 按鈕，頁(yè)面中怎么才能顯示home的內(nèi)容。這就要在js 文件中配置路由。

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

1， route，它是一條路由，由這個(gè)英文單詞也可以看出來(lái)，它是單數(shù)， Home按鈕  => home內(nèi)容， 這是一條route,  about按鈕 => about 內(nèi)容， 這是另一條路由。

2， routes 是一組路由，把上面的每一條路由組合起來(lái)，形成一個(gè)數(shù)組。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}]

3， router 是一個(gè)機(jī)制，相當(dāng)于一個(gè)管理者，它來(lái)管理路由。因?yàn)閞outes 只是定義了一組路由，它放在哪里是靜止的，當(dāng)真正來(lái)了請(qǐng)求，怎么辦？ 就是當(dāng)用戶(hù)點(diǎn)擊home 按鈕的時(shí)候，怎么辦？這時(shí)router 就起作用了，它到routes 中去查找，去找到對(duì)應(yīng)的 home 內(nèi)容，所以頁(yè)面中就顯示了 　　home 內(nèi)容。

4，客戶(hù)端中的路由，實(shí)際上就是dom 元素的顯示和隱藏。當(dāng)頁(yè)面中顯示home 內(nèi)容的時(shí)候，about 中的內(nèi)容全部隱藏，反之也是一樣?？蛻?hù)端路由有兩種實(shí)現(xiàn)方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的內(nèi)容來(lái)實(shí)現(xiàn)的

在vue中實(shí)現(xiàn)路由還是相對(duì)簡(jiǎn)單的。因?yàn)槲覀冺?yè)面中所有內(nèi)容都是組件化的，我們只要把路徑和組件對(duì)應(yīng)起來(lái)就可以了，然后在頁(yè)面中把組件渲染出來(lái)。

1， 頁(yè)面實(shí)現(xiàn)（html模版中）

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

2， js 中配置路由

首先要定義route,  一條路由的實(shí)現(xiàn)。它是一個(gè)對(duì)象，最基本的一條路由由兩個(gè)部分組成： path: component.  path 指路徑，component 指的是組件。如：{path:'/home', component: home}

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

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

最后創(chuàng)建router 對(duì)路由進(jìn)行管理，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建，接受routes 參數(shù)。

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

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

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

執(zhí)行過(guò)程：當(dāng)用戶(hù)點(diǎn)擊 router-link 標(biāo)簽時(shí)，會(huì)去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}  path 一一對(duì)應(yīng)，從而找到了匹配的組件， 最后把組件渲染到 <router-view> 標(biāo)簽。所有的這些實(shí)現(xiàn)才是基于hash 實(shí)現(xiàn)的。

vue-cli 創(chuàng)建一個(gè)項(xiàng)目體驗(yàn)一下, 當(dāng)然不要忘記安裝vue-router

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

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

<template>
  <div>
    <h2>about</h2>
    <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 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下 -->
   <router-link to="/home">Home</router-link>
   <router-link to="/about">About</router-link>
  </header>
  <!-- 對(duì)應(yīng)的組件內(nèi)容渲染到router-view中 -->
  <router-view></router-view>  
 </div>
</template>

<script>
export default {
 
}
</script>

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

import Vue from "vue";
import VueRouter from "vue-router";

// 引入組件
import home from "./home.vue";
import about from "./about.vue";

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  }
]

var router = new VueRouter({
  routes
})
export default router;

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

import Vue from 'vue'
import App from './App.vue'

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

5， 這時(shí)點(diǎn)擊頁(yè)面上的home 和about 可以看到組件來(lái)回切換。但是有一個(gè)問(wèn)題，當(dāng)首次進(jìn)入頁(yè)面的時(shí)候，頁(yè)面中并沒(méi)有顯示任何組件。我們想讓頁(yè)面一加載進(jìn)來(lái)就顯示home頁(yè)面，這需要重定向，所謂重定向，其實(shí)就是重新給它指定一個(gè)方向，比如當(dāng)用戶(hù)點(diǎn)擊home 的時(shí)候，我們讓它指向about.

這用到了redirect 配置。剛進(jìn)入頁(yè)面的時(shí)候，它的路徑是 '/', 所以重新定義到home

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

6， 當(dāng)我們打開(kāi)瀏覽器的控制臺(tái)，可以看到路由時(shí)組件的切換。

首先看到 router-link 標(biāo)簽渲染成了 a 標(biāo)簽，to 屬性變成了a 標(biāo)簽的 href 屬性，這時(shí)就明白了點(diǎn)擊跳轉(zhuǎn)的意思。router-view 標(biāo)簽渲染成了我們定義的組件?？梢詫?duì)比一下app.vue 中的標(biāo)簽和控制臺(tái)中的標(biāo)簽

 動(dòng)態(tài)路由

官網(wǎng)給的例子是，不同的用戶(hù)（就是用戶(hù)的id不同），它都會(huì)導(dǎo)航到同一個(gè)user  組件中。這樣我們?cè)谂渲寐酚傻臅r(shí)候，就不能寫(xiě)死, 就是路由中的path屬性，不能寫(xiě)死。如 path： “/home”,只有是home的時(shí)候，才能顯示home 組件，執(zhí)行的是嚴(yán)格匹配。導(dǎo)航到 user 組件，路徑中肯定有user,

id 不同，那就給路徑一個(gè)動(dòng)態(tài)部分來(lái)匹配不同的id. 動(dòng)態(tài)部分 以 : 開(kāi)頭，那么路徑就變成了 /user/:id, 這條路由就可以這么寫(xiě)： { path:"/user/:id", component: user }.

再定義一個(gè)user組件，頁(yè)面中添加兩個(gè)router-link 用于導(dǎo)航， router.js中添加路由配置。user組件隨便寫(xiě)一個(gè)就好了。

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>
   <!-- 增加兩個(gè)到user組件的導(dǎo)航，可以看到這里使用了不同的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路徑，配置了動(dòng)態(tài)的id*/
  {
    path: "/user/:id",
    component: user
  },
  {
    path: '/', 
    redirect: '/home' 
  }
]

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。