Vue router配置與使用分析講解
說明
- 本教程適用于vue3中的路由vue-router@4,的配置及使用
- 安裝及配置
- 路由的基本使用
- 動態(tài)路由的添加
- 路由守衛(wèi)
- 找不到路由配置(path: ‘/:pathMatch(.)’,)
一、安裝及配置
安裝
npm install vue-router@4
配置
//自己創(chuàng)建的router文件中 import { createRouter, createWebHashHistory } from 'vue-router' //createWebHashHistory 在訪問的時候帶有# //createWebHistory 在訪問的時候不帶# const router = createRouter({ history: createWebHashHistory(), routes: [ //... ], }) export default router
//在main.js文件中 import router from 'router_path' const app = createApp(App) app.use(router) app.mount('#app')
二、在html中使用
用 Vue + Vue Router 創(chuàng)建單頁應用非常簡單:通過 Vue.js,我們已經(jīng)用組件組成了我們的應用。當加入 Vue Router 時,我們需要做的就是將我們的組件映射到路由上,讓 Vue Router 知道在哪里渲染它們。下面是一個基本的例子:
HTML
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <div id="app"> <h1>Hello App!</h1> <p> <!--使用 router-link 組件進行導航 --> <!--通過傳遞 `to` 來指定鏈接 --> <!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標簽--> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div>
router-link
請注意,我們沒有使用常規(guī)的 a 標簽,而是使用一個自定義組件 router-link 來創(chuàng)建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL,處理 URL 的生成以及編碼。我們將在后面看到如何從這些功能中獲益。
router-view
router-view 將顯示與 url 對應的組件。你可以把它放在任何地方,以適應你的布局。
三、路由的基本使用
路由基本元素有name、path、component、meta(字典)幾個要素
- name路由名
- path路由路徑
- component組件名(組件的路徑及組件名)
- meta路由元信息
- 例
import { createRouter, createWebHashHistory } from 'vue-router' import Login from '@/views/Login.vue' const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', name: 'login', meta:{ title:'登錄', }, component: Login }, }) export default router
帶參數(shù)的路由匹配
很多時候,我們需要將給定匹配模式的路由映射到同一個組件。例如,我們可能有一個 User 組件,它應該對所有用戶進行渲染,但用戶 ID 不同。在 Vue Router 中,我們可以在路徑中使用一個動態(tài)字段來實現(xiàn),我們稱之為 路徑參數(shù) :
const User = { template: '<div>User</div>', } // 這些都會傳遞給 `createRouter` const routes = [ // 動態(tài)字段以冒號開始 { path: '/users/:id', component: User }, ]
現(xiàn)在像 /users/johnny 和 /users/jolyne 這樣的 URL 都會映射到同一個路由。
路徑參數(shù) 用冒號 : 表示。當一個路由被匹配時,它的 params 的值將在每個組件中以 this.$route.params 的形式暴露出來。因此,我們可以通過更新 User 的模板來呈現(xiàn)當前的用戶 ID:
const User = { template: '<div>User {{ $route.params.id }}</div>', }
你可以在同一個路由中設置有多個 路徑參數(shù),它們會映射到 $route.params 上的相應字段。例如:
匹配模式 | 匹配路徑 | route.params |
---|---|---|
/users/:username | /users/eduardo | { username: ‘eduardo’ } |
/users/:username/posts/:postId | /users/eduardo/posts/123 | { username: ‘eduardo’, postId: ‘123’ } |
除了 r o u t e . p a r a m s 之外, route.params 之外, route.params之外,route 對象還公開了其他有用的信息,如 r o u t e . q u e r y (如果 U R L 中存在參數(shù))、 route.query(如果 URL 中存在參數(shù))、 route.query(如果URL中存在參數(shù))、route.hash 等。你可以在 API 參考中查看完整的細節(jié)。
四、動態(tài)路由的添加
路由守衛(wèi)
找不到路由配置
常規(guī)參數(shù)只匹配 url 片段之間的字符,用 / 分隔。如果我們想匹配任意路徑,我們可以使用自定義的 路徑參數(shù) 正則表達式,在 路徑參數(shù) 后面的括號中加入 正則表達式 :
const routes = [ // 將匹配所有內容并將其放在 `$route.params.pathMatch` 下 { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, // 將匹配以 `/user-` 開頭的所有內容,并將其放在 `$route.params.afterUser` 下 { path: '/user-:afterUser(.*)', component: UserGeneric }, ]
在這個特定的場景中,我們在括號之間使用了自定義正則表達式,并將pathMatch 參數(shù)標記為可選可重復。這樣做是為了讓我們在需要的時候,可以通過將 path 拆分成一個數(shù)組,直接導航到路由:
this.$router.push({ name: 'NotFound', // 保留當前路徑并刪除第一個字符,以避免目標 URL 以 `//` 開頭。 params: { pathMatch: this.$route.path.substring(1).split('/') }, // 保留現(xiàn)有的查詢和 hash 值,如果有的話 query: this.$route.query, hash: this.$route.hash, })
到此這篇關于Vue router配置與使用分析講解的文章就介紹到這了,更多相關Vue router配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-03-03Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法
這篇文章主要介紹了Vue 打包的靜態(tài)文件不能直接運行的原因及解決辦法,幫助大家更好的理解和學習vue框架,感興趣的朋友可以了解下2020-11-11