vue中router怎么用

這篇文章主要介紹vue中router怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出上杭免費(fèi)做網(wǎng)站回饋大家。

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

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

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

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

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

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

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

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

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

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

在vue-router中, 我們看到它定義了兩個(gè)標(biāo)簽<router-link> 和<router-view>來對應(yīng)點(diǎn)擊和顯示部分。<router-link> 就是定義頁面中點(diǎn)擊的部分，<router-view> 定義顯示部分，就是點(diǎn)擊后，區(qū)配的內(nèi)容顯示在什么地方。所以 <router-link> 還有一個(gè)非常重要的屬性 to，定義點(diǎn)擊之后，要到哪里去，如：<router-link to="/home">Home</router-link>

2， js 中配置路由

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

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

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

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

const router = new VueRouter({
  routes // routes: routes 的簡寫
})

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

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

執(zhí)行過程：當(dāng)用戶點(diǎn)擊 router-link 標(biāo)簽時(shí)，會去尋找它的 to 屬性，它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home} path 一一對應(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>
 <!-- 對應(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í)例中，啟動路由。這里其實(shí)還有一種方法，就像vuex store 注入到根實(shí)例中一樣，我們也可以把vueRouter 直接注入到根實(shí)例中。在main.js中引入路由，注入到根實(shí)例中。

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from "./router.js" // import router 的router 一定要小寫， 不要寫成Router, 否則報(bào) can't match的報(bào)錯(cuò)
new Vue({
 el: '#app',
 router, // 注入到根實(shí)例中
 render: h => h(App)
})

5，這時(shí)點(diǎn)擊頁面上的home 和about 可以看到組件來回切換。但是有一個(gè)問題，當(dāng)首次進(jìn)入頁面的時(shí)候，頁面中并沒有顯示任何內(nèi)容。這是因?yàn)槭状芜M(jìn)入頁面時(shí)，它的路徑是 '/'，我們并沒有給這個(gè)路徑做相應(yīng)的配置。一般，頁面一加載進(jìn)來都會顯示home頁面，我們也要把這個(gè)路徑指向home組件。但是如果我們寫{ path: '/', component: Home },vue 會報(bào)錯(cuò)，因?yàn)閮蓷l路徑卻指向同一個(gè)方向。這怎么辦？這需要重定向，所謂重定向，就是重新給它指定一個(gè)方向，它本來是訪問 / 路徑，我們重新指向‘/home', 它就相當(dāng)于訪問 '/home', 相應(yīng)地, home組件就會顯示到頁面上。vueRouter中用 redirect 來定義重定向。

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

現(xiàn)在頁面正常了，首次進(jìn)入顯示home, 并且點(diǎn)擊也可以看到內(nèi)容的切換。

6，最后，我們看一下路由是怎么實(shí)現(xiàn)的

打開瀏覽器控制臺，首先看到 router-link 標(biāo)簽渲染成了 a 標(biāo)簽，to 屬性變成了a 標(biāo)簽的 href 屬性，這時(shí)就明白了點(diǎn)擊跳轉(zhuǎn)的意思。router-view 標(biāo)簽渲染成了我們定義的組件，其實(shí)它就是一個(gè)占位符，它在什么地方，匹配路徑的組件就在什么地方，所以 router-link 和router-view 標(biāo)簽一一對應(yīng)，成對出現(xiàn)。

這里還看到，當(dāng)點(diǎn)擊Home和About 來回切換時(shí)，a 標(biāo)簽有一個(gè)樣式類 .router-link-active 也在來回切換，原來這是當(dāng)router-link 處于選中狀態(tài)時(shí)，vueRouter 會自動添加這個(gè)類，因此我們也可以利用這個(gè)類來改變選中時(shí)的狀態(tài)，如選中時(shí)，讓它變成紅色。但當(dāng)設(shè)置 .router-link-active {color: red;}，它并沒有生效，這時(shí)還要在類前面加一個(gè)a, a.router-link-active {color: red;}, 這樣就沒有問題了。未處于選中狀態(tài)的router-link，我們也想給它更改樣式，怎么辦? 直接給它添加一個(gè) class 就可以了， <router-link class="red">Home</router-link>

動態(tài)路由

上面我們定義的路由，都是嚴(yán)格匹配的，只有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣，才能顯示相應(yīng)的組件component. 但有時(shí)現(xiàn)實(shí)卻不是這樣的，當(dāng)我們?nèi)ピL問網(wǎng)站并登錄成功后，它會顯示歡迎你，+ 你的名字。不同的用戶登錄，只是顯示“你的名字” 部分不同，其它部分是一樣的。這就表示，它是一個(gè)組件，假設(shè)是user組件。不同的用戶（就是用戶的id不同），它都會導(dǎo)航到同一個(gè)user 組件中。這樣我們在配置路由的時(shí)候，就不能寫死, 就是路由中的path屬性，不能寫死，那要怎么設(shè)置? 導(dǎo)航到 user 組件，路徑中肯定有user, id 不同，那就給路徑一個(gè)動態(tài)部分來匹配不同的id. 在vue-router中，動態(tài)部分以 : 開頭，那么路徑就變成了 /user/:id, 這條路由就可以這么寫： { path:"/user/:id", component: user }.

我們定義一個(gè)user組件（自己隨便寫一個(gè)就好了），頁面中再添加兩個(gè)router-link 用于導(dǎo)航，最后router.js中添加路由配置，來體驗(yàn)一下

app.vue 中添加兩個(gè)router-link：

<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 配置user動態(tài)路由：

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

user組件

<template>
 <div>
  <h2>User</h2>
  <div>我是user組件</div>
 </div>
</template>
<script>
 export default {
 }
</script>

這時(shí)在頁面中點(diǎn)擊user123 和user456, 可以看到它們都導(dǎo)航到user組件，配置正確。

在動態(tài)路由中，怎么獲取到動態(tài)部分？因?yàn)樵诮M件中是可以顯示不同部分的，就是上面提到的“你的名字”。其實(shí)，當(dāng)整個(gè)vue-router 注入到根實(shí)例后，在組件的內(nèi)部，可以通過this.$route 來獲取到 router 實(shí)例。它有一個(gè)params 屬性，就是來獲得這個(gè)動態(tài)部分的。它是一個(gè)對象，屬性名，就是路徑中定義的動態(tài)部分 id, 屬性值就是router-link中to 屬性中的動態(tài)部分，如123。使用vuex時(shí)，組件中想要獲取到state 中的狀態(tài)，是用computed 屬性，在這里也是一樣，在組件中，定義一個(gè)computed 屬性dynamicSegment， user 組件修改如下：

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

這里還有最后一個(gè)問題，就是動態(tài)路由在來回切換時(shí)，由于它們都是指向同一組件，vue不會銷毀再創(chuàng)建這個(gè)組件，而是復(fù)用這個(gè)組件，就是當(dāng)?shù)谝淮吸c(diǎn)擊（如：user123）的時(shí)候，vue 把對應(yīng)的組件渲染出來，但在user123, user456點(diǎn)擊來回切換的時(shí)候，這個(gè)組件就不會發(fā)生變化了，組件的生命周期不管用了。這時(shí)如果想要在組件來回切換的時(shí)候做點(diǎn)事情，那么只能在組件內(nèi)部（user.vue中）利用watch 來監(jiān)聽$route 的變化。把上面的代碼用監(jiān)聽$route 實(shí)現(xiàn)

<script>
 export default {
  data () {
   return {
    dynamicSegment: ''
   }
  },
  watch: {
   $route (to,from){
    // to表示的是你要去的那個(gè)組件，from 表示的是你從哪個(gè)組件過來的，它們是兩個(gè)對象，你可以把它打印出來，它們也有一個(gè)param 屬性
    console.log(to);
    console.log(from);
    this.dynamicSegment = to.params.id
   }
  }
 }
</script>

嵌套路由

嵌套路由，主要是由我們的頁面結(jié)構(gòu)所決定的。當(dāng)我們進(jìn)入到home頁面的時(shí)候，它下面還有分類，如手機(jī)系列，平板系列，電腦系列。當(dāng)我們點(diǎn)擊各個(gè)分類的時(shí)候，它還是需要路由到各個(gè)部分，如點(diǎn)擊手機(jī)，它肯定到對應(yīng)到手機(jī)的部分。

在路由的設(shè)計(jì)上，首先進(jìn)入到 home ,然后才能進(jìn)入到phone, tablet, computer. Phone, tablet, compute 就相當(dāng)于進(jìn)入到了home的子元素。所以vue 提供了childrens 屬性，它也是一組路由,相當(dāng)于我們所寫的routes。

首先，在home頁面上定義三個(gè)router-link 標(biāo)簽用于導(dǎo)航，然后再定義一個(gè)router-view標(biāo)簽，用于渲染對應(yīng)的組件。router-link 和router-view 標(biāo)簽要一一對應(yīng)。home.vue 組件修改如下：

<template>
 <div>
  <h2>home</h2>
<!-- router-link 的to屬性要注意，路由是先進(jìn)入到home,然后才進(jìn)入相應(yīng)的子路由如 phone,所以書寫時(shí)要把 home 帶上 -->
  <p>
   <router-link to="/home/phone">手機(jī)</router-link>
   <router-link to="/home/tablet">平板</router-link>
   <router-link to="/home/computer">電腦</router-link>
  </p>
  <router-view></router-view>
 </div>
</template>

router.js 配置路由，修改如下：

const routes = [
 {  path:"/home",
　　　　　// 下面這個(gè)屬性也不少，因?yàn)?，我們是先進(jìn)入home頁面，才能進(jìn)入子路由
  component: home,
　　　　 // 子路由
  children: [
   {
    path: "phone",
    component: phone
   },
   {
    path: "tablet",
    component: tablet
   },
   {
    path: "computer",
    component: computer
   }
  ]
 },
 {
  path: "/about",
  component: about
 },
 {
  path: "/user/:id",
  component: user
 },
 {
  path: '/', 
  redirect: '/home' 
 }
]

這時(shí)當(dāng)我們點(diǎn)擊home 時(shí)，它下面出現(xiàn)手機(jī)等字樣，但沒有任何對應(yīng)的組件進(jìn)行顯示，這通常不是我們想要的。要想點(diǎn)擊home時(shí)，要想渲染相對應(yīng)的子組件，那還需要配置一條路由。當(dāng)進(jìn)入到home 時(shí)，它在children中對應(yīng)的路由path 是空 ‘'，完整的childrens 如下：

children: [
 {
  path: "phone",
  component: phone
 },
 {
  path: "tablet",
  component: tablet
 },
 {
  path: "computer",
  component: computer
 },
 // 當(dāng)進(jìn)入到home時(shí)，下面的組件顯示
 {
  path: "",
  component: phone
 }
]

命名路由

命名路由，很簡單，因?yàn)楦鶕?jù)名字就可以知道，這個(gè)路由有一個(gè)名字，那就直接給這個(gè)路由加一個(gè)name 屬性，就可以了。給user 路由加一個(gè)name 屬性：

{
  path: "/user/:id",
  name: "user",
  component: user
}

命名路由的使用, 在router-link 中to 屬性就可以使用對象了,

 <router-link to="/user/123">User123</router-link> // 和下面等價(jià) 
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 當(dāng)使用對象作為路由的時(shí)候，to前面要加一個(gè)冒號,表示綁定

編程式導(dǎo)航：這主要應(yīng)用到按鈕點(diǎn)擊上。當(dāng)點(diǎn)擊按鈕的時(shí)候，跳轉(zhuǎn)另一個(gè)組件, 這只能用代碼，調(diào)用rourter.push() 方法。當(dāng)們把router 注入到根實(shí)例中后，組件中通過 this.$router 可以獲取到router, 所以在組件中使用

this.$router.push("home"), 就可以跳轉(zhuǎn)到home界面

以上是“vue中router怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：vue中router怎么用
網(wǎng)頁URL：http://muchs.cn/article44/ghipee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、建站公司、虛擬主機(jī)、網(wǎng)站制作、小程序開發(fā)、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容