前端vue：路由的基本使用

1. 路由

概念： Hash 地址与组件之间的对应关系
工作方式：
当用户点击页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由就会监听到 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染都浏览器中

2. vue-router`

vue-router 是 vue.js 官方给出的路由解决方案

2.1 vue-router 的基本用法

1. 安装 vue-router 包

npm install vue-router@4

2. 创建路由模块
   在 src 源代码目录下，新建 router/index.js 路由模块，并初始化代码：

import { createRouter } from 'vue-router'
const routes = []
const router = createRouter({
  routes
})
export default router

3. 导入并挂载路由模块
   在 src/main.js 入口文件中，导入并挂载路由模块

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router'
// 通过 use(router)注册
createApp(App).use(router).mount('#app')

4. 声明路由链接和占位符
   在 需要使用的组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符

<template>
  <div>
     // 定义路由链接
     <RouterLink to="/" />

     // 定义路由占位符
     <RouterView />
  </div>
</template>

5. 声明路由的匹配规则
   在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则

import { createRouter } from 'vue-router'

// 创建路由的实例对象
const routes = [{
  path: '/',
  name: 'Layout',
  component: () => import('@/views/Layout')
}]

const router = createRouter({
  routes
})

export default router

2.2 路由重定向

指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面

通过路由规则的 redirect 属性，设置路由的重定向

2.3 children属性

通过 children 属性声明子路由规则

import { createRouter } from 'vue-router'

// 创建路由的实例对象
const routes = [{
  path: '/',
  name: 'Layout',
  component: () => import('@/views/Layout')，
  children: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home/')
    }
}]

const router = createRouter({
  routes
})
export default router

2.4动态路由

指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性
在 vue-router 中使用英文的冒号（:）来定义路由的参数项

import { createRouter } from 'vue-router'

// 创建路由的实例对象
const routes = [{
  path: '/',
  name: 'Layout',
  component: () => import('@/views/Layout')，
  children: [
    {
      path: '/category/:id',
      name: 'TopCategory',
      component: () => import('@/views/category/index')
    }
}]
const router = createRouter({
  routes
})
export default router

2.5 $route.params 参数对象

方法一： 在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值
方法二： 使用 props 接收路由参数，为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参（更推荐）
在匹配动态路由的时候，开启 props：true 传参

import { createRouter } from 'vue-router'

// 创建路由的实例对象
const routes = [{
  path: '/',
  name: 'Layout',
  component: () => import('@/views/Layout')，
  children: [
    {
      path: '/category/:id',
      name: 'TopCategory',
      component: () => import('@/views/category/index')，
      props：true
    }
}]

const router = createRouter({
  routes
})
export default router

通过 prpos 节点使用

vue-router 的编程式导航 API

3.1 $router.push

调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面

3.2 $router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面
push 和 replace 的区别：

push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录

3.3 $router.go

调用 this.$router.go() 方法，可以在浏览历史中前进和后退
简化用法：

router.forward() 在历史记录中，前进到下一个页面

作者：ZHOUQYI
链接：https://juejin.cn/post/7095379283169771557
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。