vue路由router的基本使用

路由：

路由是乙個js功能模組，用於解決spa專案元件切換顯示問題的，本身對元件切換的各個底層技術有做封裝，是更成熟元件切換解決方案，使用起來更高階、方便。路由是開發spa專案的必備技能。

路由封裝的元素有：

路由實現：

在專案中安裝路由有兩種方式(兩種方式本質完全一樣)：

vuecli（腳手架）建立專案的時候(勾選router專案即可，這時會增加乙個步驟，選擇n即可)。

單獨安裝：

npm i vue-router

在src/main.js中給路由做如下配置：

import 引入路由模組。

import 引入各個業務元件。

vue.use(路由模組) 註冊路由元件。

建立路由物件，通過path、component 設定#錨點與 元件的聯絡。

在vue例項內部掛載 router 路由物件。

具體**：

import vue from

'vue'
// 1. 引入路由模組
import vuerouter from
'vue-router'
// 2. 匯入各個業務元件
import home from
'./components/home.vue'
import movie from
'./components/movie.vue'
// 3. 註冊路由中的相關元件
//    路由中有兩個元件( )被進場使用
// a. 單獨註冊
// vue.component('router-link',***)
// vue.component('router-view',***)
// b. 一併註冊，一次性把所有的元件都註冊好，更高效
vue.
use(vuerouter)
// 外掛程式
// 4. 建立乙個路由物件
const router =
newvuerouter(,
,]})
vue.config.productiontip =
false
newvue()
.$mount
()

"/home"

>
首頁router-link
>
"/movie"
>
電影router-link
>

>

router-view
>

>

>
>
>
>
"/home"
>
首頁router-link
>
"/movie"
>
電影router-link
>
p>
"cont"
>
>
router-view
>
p>
div>
template
>
路由執行過程：
#錨點變化了會立即被 路由監聽到 (路由有封裝window.onhashchange事件)。
之後路由會獲取變化後的#錨點資訊 (路由有封裝window.location.hash)。
再之後路由根據#錨點資訊找到對應的元件 (在main.js中可知)。
最後元件是通過路由佔位符router-view顯示的。

vue中 router和 route的基本使用

發現在自己在前端的道路上要一去不復返了，好了廢話少說，開始記錄。const routes router可以理解為乙個容器，或者說一種機制，它管理了一組route。簡單來說，route只是進行了url和函式的對映，而在當接收到乙個url之後，去路由對映表中查詢相應的函式，這個過程是由router來處理...

VUE中的路由router

vue router是vue.js官方的路由外掛程式，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue router單頁面應用中，則是路徑之間的切換...

vue路由router的實現

1.安裝router 安裝 npm install vue router或cnpm install vue router或yarn add vue router 2.在src目錄下新建乙個router.js檔案引用如下 import vue from vue import vuerouter fro...