官方文檔地址：

入門 | Vue Router

一、vue中的路由作用

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

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

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

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

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

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

 （2）使用路由

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

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

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

在App.vue中，添加  <router-view></router-view>  用來展示路由配置組件的內(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)擊后退會返回到上一個(gè)頁面

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

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

          示例：

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

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

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

                                  this.$route.query.selected

【2】帶參數(shù)：頁面通過path和params,name和path傳遞參數(shù) （刷新頁面后參數(shù)會丟失,url參數(shù)不展示在地址來，類似post請求）

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

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

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

                                 this.$route.params.user

示例：

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

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

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

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

 取參： $router.params.user

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

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

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

總結(jié)：

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

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

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è)頁面，n可以為正整數(shù)或負(fù)整數(shù)，一般用this.$router.go(-1)來返回上一個(gè)頁面

四、標(biāo)簽路由

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

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

五、路由元：

路由元，通過meat屬性，可以將任何信息附加到路由上，可以判斷誰可以訪問路由及控制是否訪問組件。

格式：           meta:{

                        變量名1：變量值,

                        變量名2：變量值,

                     }

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

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

【2】修改App.vue  中的頁腳組件，增加v-show屬性，通過路由配置中的meta.showfooter,控制Footer頁腳組件的顯示隱藏。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)安裝的是最新版本的路由，打開根目錄的package.json文件，查看dependencies 中的vue-router版本，如果是最新的版本4.x.x ，重新安裝3版本后再進(jìn)行測試,就可以運(yùn)行了. 

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

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

最新評論