Vue router配置与使用分析讲解

目录

• 说明
• 一、安装及配置
• 二、在html中使用
  • HTML
  • router-link
  • router-view
• 三、路由的基本使用
• 四、动态路由的添加

说明

1. 本教程适用于vue3中的路由vue-router@4，的配置及使用
2. 安装及配置
3. 路由的基本使用
4. 动态路由的添加
5. 路由守卫
6. 找不到路由配置（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 id="app">
  <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,
})

到此这篇关于Vue router配置与使用分析讲解的文章就介绍到这了,更多相关Vue router配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！