Vue router配置與使用分析講解

更新時間：2022年12月23日 15:35:19 作者：hrj199036

第一次寫Vue項(xiàng)目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細(xì)節(jié)

說明

本教程適用于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)建單頁應(yīng)用非常簡單：通過 Vue.js，我們已經(jīng)用組件組成了我們的應(yīng)用。當(dā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 組件進(jìn)行導(dǎo)航 -->
    <!--通過傳遞 `to` 來指定鏈接 -->
    <!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標(biāo)簽-->
    <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 標(biāo)簽，而是使用一個自定義組件 router-link 來創(chuàng)建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。我們將在后面看到如何從這些功能中獲益。

router-view

router-view 將顯示與 url 對應(yīng)的組件。你可以把它放在任何地方，以適應(yīng)你的布局。

三、路由的基本使用

路由基本元素有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 組件，它應(yīng)該對所有用戶進(jìn)行渲染，但用戶 ID 不同。在 Vue Router 中，我們可以在路徑中使用一個動態(tài)字段來實(shí)現(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ù) 用冒號 : 表示。當(dāng)一個路由被匹配時，它的 params 的值將在每個組件中以 this.$route.params 的形式暴露出來。因此，我們可以通過更新 User 的模板來呈現(xiàn)當(dāng)前的用戶 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

你可以在同一個路由中設(shè)置有多個路徑參數(shù)，它們會映射到 $route.params 上的相應(yīng)字段。例如：

匹配模式	匹配路徑	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 參考中查看完整的細(xì)節(jié)。

四、動態(tài)路由的添加

路由守衛(wèi)

找不到路由配置

常規(guī)參數(shù)只匹配 url 片段之間的字符，用 / 分隔。如果我們想匹配任意路徑，我們可以使用自定義的路徑參數(shù) 正則表達(dá)式，在路徑參數(shù) 后面的括號中加入正則表達(dá)式 :

const routes = [
  // 將匹配所有內(nèi)容并將其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 將匹配以 `/user-` 開頭的所有內(nèi)容，并將其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

在這個特定的場景中，我們在括號之間使用了自定義正則表達(dá)式，并將pathMatch 參數(shù)標(biāo)記為可選可重復(fù)。這樣做是為了讓我們在需要的時候，可以通過將 path 拆分成一個數(shù)組，直接導(dǎo)航到路由：

this.$router.push({
  name: 'NotFound',
  // 保留當(dāng)前路徑并刪除第一個字符，以避免目標(biāo) URL 以 `//` 開頭。
  params: { pathMatch: this.$route.path.substring(1).split('/') },
  // 保留現(xiàn)有的查詢和 hash 值，如果有的話
  query: this.$route.query,
  hash: this.$route.hash,
})

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

您可能感興趣的文章: