1、認(rèn)識vue-router

目前前端流行的三大框架，都有自己的路由實(shí)現(xiàn)：

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。我們可以訪問其官方網(wǎng)站對其進(jìn)行學(xué)習(xí)：https://router.vuejs.org/zh/

vue-router是基于路由和組件的

• 路由用戶設(shè)定訪問路徑的，將路徑和組件映射起來。
• 在vue-router的單頁面應(yīng)用中，頁面的路徑的改變就是組件的切換

2、安裝和使用vue-router

第一步：安裝vue-router npm install vue-router --save

第二步：在模塊化工程中使用它（因?yàn)槭且粋€(gè)插件，所以可以通過Vue.use()來安裝路由功能）

• 導(dǎo)入路由對象，并且調(diào)用Vue.use(VueRouter)
• 創(chuàng)建路由實(shí)例，并且傳入路由映射配置
• 在Vue實(shí)例中掛載創(chuàng)建的路由實(shí)例

使用vue-router的步驟：

• 第一步：創(chuàng)建路由組件
• 第二步：配置路由映射：組件和路徑映射關(guān)系
• 第三步：使用路由：通過 <router-link> 和 <router-view>

代碼實(shí)現(xiàn)步驟：

創(chuàng)建router實(shí)例

掛載到Vue實(shí)例中

第一步：創(chuàng)建路由組件

第二步：配置組件和路由的映射關(guān)系

第三步：使用路由

• <router-link> ：該標(biāo)簽是一個(gè)vue-router中已經(jīng)內(nèi)置的組件，他會被渲染成一個(gè) <a> 標(biāo)簽。
• <router-view> ：該標(biāo)簽會根據(jù)當(dāng)前的路徑，動態(tài)渲染出不同的組件。

3、路由的默認(rèn)路徑

默認(rèn)情況下，進(jìn)入網(wǎng)站的首頁，我們希望渲染首頁的內(nèi)容。但是我們的實(shí)現(xiàn)中，默認(rèn)沒有顯示首頁組件，必須讓用戶點(diǎn)擊才可以。

如何可以讓路徑默認(rèn)跳轉(zhuǎn)到首頁，并且渲染首頁組件呢？我們需要多配置一個(gè)映射就可以了

{
  path: '/',
  redirect: '/home'
},

配置解析：

• 我們在routes中又配置一個(gè)映射
• path配置的是根路徑：/
• redirect是重定向，也就是我們將根路徑重定向到/home的路徑下，這樣就可以得到我們想要的結(jié)果了。

4、HTML5的History模式

改變路徑的方式有兩種：

• URL 的 hash
• HTML5 的 history
• 默認(rèn)情況下，路徑的改變使用的URL的 hash

如果希望使用HTML5的history模式，進(jìn)行如下的配置：

5、router-link屬性介紹

• to：用于指定跳轉(zhuǎn)的路徑
• tag：tag可以指定 <router-link> 之后渲染成什么組件，比如我們下面的代碼會被渲染成一個(gè) <li> 元素，而不是 <a> 。 如： <router-link to='/home' tag='li'>
• replace：replace不會留下history記錄，所以指定replace的情況下，后退鍵返回不能返回到上一個(gè)頁面中
• active-class：當(dāng) <router-link> 對應(yīng)的路由匹配成功時(shí)，會自動給當(dāng)前元素設(shè)置一個(gè)router-link-active的class，設(shè)置active-class可以修改默認(rèn)的名稱。

6、路由代碼跳轉(zhuǎn)

有的時(shí)候，頁面的跳轉(zhuǎn)可能需要執(zhí)行相應(yīng)的JavaScript代碼，這個(gè)時(shí)候，就可以使用第二種跳轉(zhuǎn)方式了。

比如我們將代碼修改如下：

7、動態(tài)路由

在某些情況下，一個(gè)頁面的path路徑可能是不確定的，比如我們進(jìn)入用戶界面時(shí)，希望是如下的路徑：

• /user/aaa或/user/bbb
• 除了有前面的/user之外，后面還跟上了用戶的ID
• 這種path和Component的匹配關(guān)系，我們稱之為動態(tài)路由（也是路由傳遞數(shù)據(jù)的一種方式）

8、路由懶加載

路由懶加載的方式

方式一：結(jié)合Vue的異步組件和Webpack的代碼分析

const Home = resolve => { require. ensure(['../ components/Home.vue'], () => { resolve(require('../ components/Home.vue')) })};

方式二：AMD寫法

const About = resolve => require([' ../ components/ About.vue'], resolve);

???????方式三：在ES6中，我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割

const Home = () => import(' . ./ components/Home.vue ' )

路由懶加載的效果

9、嵌套路由實(shí)現(xiàn)

10、傳遞參數(shù)的方式

傳遞參數(shù)主要有兩種類型：params和query

• params的類型：
  • 配置路由格式：/router/:id
  • 傳遞的方式：在path后面跟上對應(yīng)的值
  • 傳遞后形成的路徑：/router/123，/router/abc
• query的類型：
  • 配置路由格式：/router，也就是普通配置
  • 傳遞的方式：對象中使用query的key作為傳遞方式
  • 傳遞后形成的路徑：/router?id= 123，/router?id=abc

11、導(dǎo)航守衛(wèi)的使用

我們可以利用beforeEach來完成標(biāo)題的修改

• 首先，我們可以在鉤子當(dāng)中定義一些標(biāo)題，可以利用mate來定義
• 其次，利用導(dǎo)航守衛(wèi)修改我們的標(biāo)題

導(dǎo)航鉤子的三個(gè)參數(shù)解析：

• to：即將要進(jìn)入的目標(biāo)的路由對象
• from：當(dāng)前導(dǎo)航即要離開的路由對象
• next：調(diào)用該方法后，才能進(jìn)入下一個(gè)鉤子

如果是后置鉤子，也就是afterEach，不需要主動調(diào)用next(）函數(shù)。

上面我們使用的導(dǎo)航守衛(wèi)，被稱之為全局守衛(wèi)。

12、TabBar實(shí)現(xiàn)思路

• 如果在下方有兩個(gè)單獨(dú)的TabBar組件，你如何封裝
• 自定義TabBar組件，在APP中使用
• 讓TabBar處于底部，并且設(shè)置相關(guān)的樣式
• TarBar中顯示的內(nèi)容由外界決定
• 定義插槽
• flex布局平分TabBar
• 自定義TarBarItem，可以傳入圖片和文字
• 定義TabBarItem，并且定義兩個(gè)插槽：圖片、文字。
• 給兩個(gè)插槽外層包裝div，用于設(shè)置樣式。
• 填充插槽，實(shí)現(xiàn)底部TabBar的效果。
• 傳入高亮圖片
• 定義另外一個(gè)插槽，插入active-icon的數(shù)據(jù)
• 定義一個(gè)變量isActive，通過v-show來決定是否顯示對應(yīng)的icon
• TabBarItem綁定路由數(shù)據(jù)
• 安裝路由：npm install vue-route --save
• 完成router/index.js的內(nèi)容，以及創(chuàng)建對應(yīng)的組件
• main.js中注冊router
• APP中加入<router-view>組件
• 點(diǎn)擊item跳轉(zhuǎn)到對應(yīng)路由，并且動態(tài)決定isActive
• 監(jiān)聽item的點(diǎn)擊，通過this.$router.replace()替換路由路徑
• 通過this.$route.path.indexOf(this.link) !== -1來判斷是否是active
• 動態(tài)計(jì)算active樣式
• 封裝新的計(jì)算屬性：this.isActive ? {'color': 'red'}:{}

效果圖：

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

最新評論