1、認識vue-router

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

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

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

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

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

2、安裝和使用vue-router

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

第二步：在模塊化工程中使用它（因為是一個插件，所以可以通過Vue.use()來安裝路由功能）

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

使用vue-router的步驟：

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

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

創(chuàng)建router實例

掛載到Vue實例中

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

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

第三步：使用路由

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

3、路由的默認路徑

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

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

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

配置解析：

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

4、HTML5的History模式

改變路徑的方式有兩種：

• URL 的 hash
• HTML5 的 history
• 默認情況下，路徑的改變使用的URL的 hash

如果希望使用HTML5的history模式，進行如下的配置：

5、router-link屬性介紹

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

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

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

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

7、動態(tài)路由

在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時，希望是如下的路徑：

• /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、嵌套路由實現(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來完成標題的修改

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

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

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

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

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

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

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

效果圖：

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

最新評論