本文開(kāi)始我們來(lái)給大家介紹在Vue中非常重要的一個(gè)內(nèi)容，就是路由Router

什么是路由

后端路由：對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源；

前端路由：對(duì)于單頁(yè)面應(yīng)用程序來(lái)說(shuō)，主要通過(guò)URL中的hash(#號(hào))來(lái)實(shí)現(xiàn)不同頁(yè)面之間的切換，同時(shí)，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容；所以，單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)；

在單頁(yè)面應(yīng)用程序中，這種通過(guò)hash改變來(lái)切換頁(yè)面的方式，稱作前端路由(區(qū)別于后端路由)；

Vue路由基本使用

1. 基本使用

我們先來(lái)看看 路由的 基本使用，基礎(chǔ)頁(yè)面如下

1.1 引入vue-router

我們需要引入vue-router.js文件，而且必須是在vue.js文件之后引入

1.2 創(chuàng)建組件模板

創(chuàng)建兩個(gè)組件模板對(duì)象，如下

1.3 VueRouter實(shí)例

當(dāng) 導(dǎo)入 vue-router 包之后，在 window 全局對(duì)象中，就有了一個(gè) 路由的構(gòu)造函數(shù)叫做 VueRouter,在 new 路由對(duì)象的時(shí)候，可以為 構(gòu)造函數(shù)，傳遞一個(gè)配置對(duì)象。在配置對(duì)象中我們可以來(lái)創(chuàng)建我們的路由規(guī)則

1.4 vm實(shí)例綁定

創(chuàng)建的VueRouter對(duì)象我們還需要綁定到Vue實(shí)例中才有效果

1.5 router-view

我們想要使用router路由，那么我們通過(guò)router-view標(biāo)簽來(lái)占位 我們要顯示的內(nèi)容的位置

router-view標(biāo)簽是 vue-router 提供的元素，專門(mén)用來(lái) 當(dāng)作占位符的，將來(lái)，路由規(guī)則，匹配到的組件，就會(huì)展示到這個(gè) router-view 中去。所以： 我們可以把 router-view 認(rèn)為是一個(gè)占位符。

1.6 訪問(wèn)

通過(guò)上面的演示我們可以通過(guò)修改 #/后的內(nèi)容來(lái) 觸發(fā)路由中的規(guī)則，這時(shí)我們可以在頁(yè)面中添加對(duì)應(yīng)的操作按鈕來(lái)便捷觸發(fā)。

2. 重定向

上面的案例我們實(shí)現(xiàn)了路由的基本使用，但是頁(yè)面第一次打開(kāi)的時(shí)候，是沒(méi)有路由規(guī)則的，這時(shí)我們可以配置一個(gè)，如下

效果

有實(shí)現(xiàn)，但是地址顯示的是“/”,我們希望地址和路由的結(jié)果是一致的，這時(shí)我們可以設(shè)置個(gè)重定向來(lái)處理。

3. router-link

我們可以用router-link標(biāo)簽來(lái)替換掉 a標(biāo)簽，這樣會(huì)更靈活些，如下

我們發(fā)現(xiàn)router-link渲染的最終的標(biāo)簽也是 a 標(biāo)簽，我們可以通過(guò) router-link中的 tag屬性來(lái)修改 渲染的標(biāo)簽類型

4. 高亮處理

有時(shí)候我們需要給被選中的標(biāo)簽設(shè)置特殊的樣式，這時(shí)怎么辦呢？看下面的動(dòng)圖。

通過(guò)演示我們發(fā)現(xiàn)，當(dāng)對(duì)應(yīng)的標(biāo)簽被選中的時(shí)候會(huì)動(dòng)態(tài)給標(biāo)簽添加 class屬性:

router-link-active,那么我們就可以利用這 屬性了

實(shí)現(xiàn)了我們需要的效果，注意在VueRouter實(shí)例中有個(gè)屬性叫 linkActiveClass 可以設(shè)置我們 特定的 class 值。

效果

5. 動(dòng)畫(huà)效果

?最后我們可以將前面講過(guò)的動(dòng)畫(huà)運(yùn)用到組件切換上。如下

最終效果如下

————————————————

版權(quán)聲明：本文為CSDN博主「波波烤鴨」的原創(chuàng)文章，遵循CC 4.0 by-sa版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/qq_38526573/article/details/98354108

總結(jié)

以上是生活随笔為你收集整理的router vue 动态改变url_Vue教程(路由router-基本使用)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。