本文開始我們來給大家介紹在Vue中非常重要的一個內容，就是路由Router

什么是路由

后端路由：對于普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；

前端路由：對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；

在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由(區別于后端路由)；

Vue路由基本使用

1. 基本使用

我們先來看看 路由的 基本使用，基礎頁面如下

1.1 引入vue-router

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

1.2 創建組件模板

創建兩個組件模板對象，如下

1.3 VueRouter實例

當 導入 vue-router 包之后，在 window 全局對象中，就有了一個 路由的構造函數叫做 VueRouter,在 new 路由對象的時候，可以為 構造函數，傳遞一個配置對象。在配置對象中我們可以來創建我們的路由規則

1.4 vm實例綁定

創建的VueRouter對象我們還需要綁定到Vue實例中才有效果

1.5 router-view

我們想要使用router路由，那么我們通過router-view標簽來占位 我們要顯示的內容的位置

router-view標簽是 vue-router 提供的元素，專門用來 當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去。所以： 我們可以把 router-view 認為是一個占位符。

1.6 訪問

通過上面的演示我們可以通過修改 #/后的內容來 觸發路由中的規則，這時我們可以在頁面中添加對應的操作按鈕來便捷觸發。

2. 重定向

上面的案例我們實現了路由的基本使用，但是頁面第一次打開的時候，是沒有路由規則的，這時我們可以配置一個，如下

效果

有實現，但是地址顯示的是“/”,我們希望地址和路由的結果是一致的，這時我們可以設置個重定向來處理。

3. router-link

我們可以用router-link標簽來替換掉 a標簽，這樣會更靈活些，如下

我們發現router-link渲染的最終的標簽也是 a 標簽，我們可以通過 router-link中的 tag屬性來修改 渲染的標簽類型

4. 高亮處理

有時候我們需要給被選中的標簽設置特殊的樣式，這時怎么辦呢？看下面的動圖。

通過演示我們發現，當對應的標簽被選中的時候會動態給標簽添加 class屬性:

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

實現了我們需要的效果，注意在VueRouter實例中有個屬性叫 linkActiveClass 可以設置我們 特定的 class 值。

效果

5. 動畫效果

?最后我們可以將前面講過的動畫運用到組件切換上。如下

最終效果如下

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

版權聲明：本文為CSDN博主「波波烤鴨」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。