Vue router配置与使用分析讲解
目录
说明
- 本教程适用于vue3中的路由vue-router@4，的配置及使用
- 安装及配置
- 路由的基本使用
- 动态路由的添加
- 路由守卫
- 找不到路由配置（path: ‘/:pathMatch(.)’,）
一、安装及配置
安装
npm install vue-router@4
配置
//自己创建的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 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：
HTML
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div >
<h1>Hello App!</h1>
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `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
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 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
带参数的路由匹配
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：
const User = {
template: '<div>User</div>',
}
// 这些都会传递给 `createRouter`
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]
现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}
你可以在同一个路由中设置有多个 路径参数，它们会映射到 $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 中存在参数）、 route.query（如果 URL 中存在参数）、 route.query（如果URL中存在参数）、route.hash 等。你可以在 API 参考中查看完整的细节。
四、动态路由的添加
路由守卫
找不到路由配置
常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 :
const routes = [
// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
// 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
{ path: '/user-:afterUser(.*)', component: UserGeneric },
]
在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由：
this.$router.push({
name: 'NotFound',
// 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。
params: { pathMatch: this.$route.path.substring(1).split('/') },
// 保留现有的查询和 hash 值，如果有的话
query: this.$route.query,
hash: this.$route.hash,
})
原文地址：https://blog.csdn.net/hrj199036/article/details/128401492