官方文檔地址：

入門(mén) | Vue Router

一、vue中的路由作用

vue的主要思想是組件化開(kāi)發(fā)，路由用來(lái)配置組件對(duì)應(yīng)展示路徑，比如

二、vue中的路由router 使用步驟

創(chuàng)建路由文件——使用路由——配置路由出口，使路由配置內(nèi)容展示在頁(yè)面上

（1）創(chuàng)建路由文件：一般路由文件單獨(dú)放在router文件夾

在src目錄下，創(chuàng)建router文件夾，文件夾下，創(chuàng)建index.js，用來(lái)實(shí)現(xiàn)路由的創(chuàng)建。

vue中的router 需要用到vue  和vue-router 兩個(gè)依賴，請(qǐng)看一下代碼

 （2）使用路由

【1】在main.js 中引入路由文件： import router from './router'，  注意router  不要變且為小寫(xiě)

【2】注冊(cè)路由（因?yàn)閙ain.js是程序的主入口，在里面注冊(cè)后，程序運(yùn)行起來(lái)才會(huì)自動(dòng)讀取路由信息），請(qǐng)看以下代碼

 （3）配置路由出口，使路由中的組件內(nèi)容展示在頁(yè)面上

在App.vue中，添加  <router-view></router-view>  用來(lái)展示路由配置組件的內(nèi)容，示例如下

以上都配置完后，運(yùn)行程序，即可。

以上路由配置完后，怎么在代碼中實(shí)現(xiàn)路由跳轉(zhuǎn)呢？

三、路由跳轉(zhuǎn)

1、帶參數(shù)路由跳轉(zhuǎn)：

（注意路由跳轉(zhuǎn)用$router  ，路由取參用：$route）

（1）this.$router.push()  ：

跳轉(zhuǎn)到指定url路徑，并向history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面

  【1】帶參數(shù)：頁(yè)面通過(guò)path和query傳遞參數(shù)，（刷新頁(yè)面后參數(shù)不會(huì)丟失，query傳參的參數(shù)會(huì)帶在url后邊展示在地址欄(/home?user=test)，類似get請(qǐng)求）

           目標(biāo)頁(yè)面通過(guò)this.$route.query獲取參數(shù)

          示例：

                        跳轉(zhuǎn)path=‘/home’的路由并且傳遞參數(shù)selected=1  ：

                                  this.$router.push({path: '/home', query: {selected: "2"}});

                       目標(biāo)頁(yè)面獲取selected參數(shù)：

                                  this.$route.query.selected

【2】帶參數(shù)：頁(yè)面通過(guò)path和params,name和path傳遞參數(shù) （刷新頁(yè)面后參數(shù)會(huì)丟失,url參數(shù)不展示在地址來(lái)，類似post請(qǐng)求）

       （1）在給指定路由名稱的路由，傳遞參數(shù)，即通過(guò)name和path傳遞

                        跳轉(zhuǎn)name=‘register’的路由并且傳遞參數(shù)user=測(cè)試用戶  ：

                                this.$router.push({name: 'register', params: {user: '測(cè)試用戶'}});         
                目標(biāo)頁(yè)面獲取user參數(shù)值：

                                 this.$route.params.user

示例：

找到router文件中name='register'路由：

在src/view/register/index.vue  中取參數(shù)

（2）給指定路由地址，傳遞參數(shù)  ，即通過(guò)path和params傳遞參數(shù)

  傳參：this.$router.push({path: '/register', params: {user: '測(cè)試用戶'}});       

 取參： $router.params.user

（2）this.$router.replace()  ：

this.$router.replace使用方式與this.$router.push基本一致，只是this.$router.replace不會(huì)在history中添加記錄，而是替換掉history的記錄，無(wú)法通過(guò)瀏覽器的返回功能回到上一個(gè)頁(yè)面，一般用來(lái)在登出系統(tǒng)時(shí)使用

注意：push方法也可以傳replace this.$router.push({path: '/homo', replace: true})

總結(jié)：

params和query傳遞方式的區(qū)別是：query參數(shù)在地址欄可以看到，可以獲取到，類似get請(qǐng)求；params參數(shù)在地址欄看不到，參數(shù)，只能第一次進(jìn)入獲取到，刷新頁(yè)面后，參數(shù)會(huì)丟失，類似post請(qǐng)求。

push和replace區(qū)別：push地址保存在history棧中，有歷史地址記錄，通過(guò)this.$router.go(n)，可以返回到上一步；replace是直接替換當(dāng)前頁(yè)面地址，沒(méi)有歷史地址記錄。

2、不帶參數(shù)路由跳轉(zhuǎn)

this.$router.push('/home')     

this.$router.push({name: 'home'});

this.$router.push({path: '/home'});

3、this.$router.go(n)

向前或向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可以為正整數(shù)或負(fù)整數(shù)，一般用this.$router.go(-1)來(lái)返回上一個(gè)頁(yè)面

四、標(biāo)簽路由

<router-link to='需要跳轉(zhuǎn)到的頁(yè)面的路徑></router-link>

瀏覽器在解析時(shí)，將它解析成一個(gè)類似于 < a > 的標(biāo)簽

五、路由元：

路由元，通過(guò)meat屬性，可以將任何信息附加到路由上，可以判斷誰(shuí)可以訪問(wèn)路由及控制是否訪問(wèn)組件。

格式：           meta:{

                        變量名1：變量值,

                        變量名2：變量值,

                     }

場(chǎng)景：比如在前端開(kāi)發(fā)中，自定義的頁(yè)腳組件，不想在注冊(cè)頁(yè)面展示，在首頁(yè)展示，可以通過(guò)設(shè)置meta來(lái)實(shí)現(xiàn)，

【1】給router/index.js 路由文件中，添加meta屬性，自定義名稱showfooter 來(lái)區(qū)分是否展示，實(shí)現(xiàn)：當(dāng)打開(kāi)/home 主頁(yè)時(shí)，顯示頁(yè)腳；打開(kāi)/register 注冊(cè)頁(yè)面時(shí)，不顯示頁(yè)腳

【2】修改App.vue  中的頁(yè)腳組件，增加v-show屬性，通過(guò)路由配置中的meta.showfooter,控制Footer頁(yè)腳組件的顯示隱藏。v-show="true" 顯示，v-show="false" 隱藏

六、路由使用的坑

安裝路由依賴  npm install --save vue-router  ，這么安裝后，容易出現(xiàn) export 'default' (imported as 'VueRouter') was not found in 'vue-router' 警告，導(dǎo)致路由失效，這是因?yàn)椋琻pm install --save vue-router 默認(rèn)安裝的是最新版本的路由，打開(kāi)根目錄的package.json文件，查看dependencies 中的vue-router版本，如果是最新的版本4.x.x ，重新安裝3版本后再進(jìn)行測(cè)試,就可以運(yùn)行了. 

  重新安裝3版本：npm install --save vue-router@3.1.3

到此這篇關(guān)于vue中路由router配置詳解的文章就介紹到這了,更多相關(guān)vue路由router配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論