「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

在传统的html开发中，我们一般用超链接实现页面直接的切换和跳转，在vue中提供了一种路由方式，那就是vue-router，vue-router是vue官方的路由插件。适用于构建单页面应用。其作用就是将路径和组件映射起来，路由的本质就是建立起url和页面直接的映射关系。

安装vue-router

npm install vue-router@4

用 Vue + Vue Router 创建单页应用非常简单，将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们

router-link 方式

<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 会渲染成一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>

用一个自定义组件 router-link 来创建链接，没有使用a，可以在不重新加载页面的情况下更改 URLrouter-view 来显示和url对应的组件。

动态路由

有时我们会遇到一种情况，需要一种路由，路径一样，但是参数不一样，这时候就用到了vuerouter提供的带参数的动态路由了。我们需要将给定匹配模式的路由映射到同一个组件。

const Student = {
  template: '<div>Student</div>',
}
const routes = [
  // 动态字段从冒号开始
  { path: '/student/:id', component: Student },
]

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。我们可以通过更新 Student 的模板来呈现当前学生的学生id

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

嵌套路由

通过 Vue Router，可以使用嵌套路由配置来表达这种关系。

const routes = [
  {
    path: '/student/:id',
    component: Student,
    children: [
      {
        path: 'major',
        component: StudentMajor,
      },
      {
        path: 'class',
        component: StudentClass,
      },
    ],
  },
]

以 / 开头的嵌套路径将被视为根路径。这样你可以用组件嵌套，但是不必要使用嵌套的 URL。 children 配置是另一个路由数组，就像 routes 。因此，可以根据自己的需要，不断地嵌套视图

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，还可以用 router 的实例方法，通过编写代码来实现。

路由跳转

调用 this.$router.push。

// 字符串路径
router.push('/student/eduardo')

// 带有路径的对象
router.push({ path: '/student/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'student', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

替换路由

在导航时不会向 history 添加新记录，而是替换当前路由。

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

多个路由跳转

类似于 window.history.go(n)，使用router.go实现在历史堆栈中前进或后退多少步

// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

以上就是vueRouter的一些基础啦。记录一下，温故而知新。

Vue Router的使用（一）