目录

• • 前言
  • 安装配置
  • 准备工作
  • 配置路由
  • 基本使用
  • 路由传参 1
  • 路由传参 2
  • 路由传参 3
  • SEO

前言

在咱们 Vue2 时代，官方推荐咱们使用 vue-router 3.X 的库，如果是用脚手架创建的话，就直接默认集成到里面了。

Vue3 使用的是 vue-router 4.X 官方库，学习成本并不高。

安装配置

我们正式开始在 Vue3 中尝试手动从 0-1 配置好路由。

在项目终端，执行如下命令：

cnpm install vue-router@4 -S

咱们搞个 -S 写到咱们的 package.json 下 dependencies 字段中，以后项目安装依赖时会自动安装。

安装完毕后，打开 package.json 文件，可以看到已经有了。

好，安装成功了。

准备工作

先随便整俩页面，后续测试使用。

在 src 目录下新建 view 文件夹，用来存放咱们的页面。

紧接着，在里面再建立两个页面，分别是 index.vue 和 details.vue，首页和详情页。

打开 index.vue 写入以下内容。

打开 details.vue 写入以下内容。

配置路由

创建好测试页面后，咱们开始配置路由。

在 src 目录下，新建 router 文件夹，接着在里面建立 index.js 与 routes.js 文件。

咱们打开 router.js ，在里面写好页面路由表配置。

// 路由表(一个首页, 一个详情页)
const routes = [{name: 'index',path: '/',component: () => import('../view/index.vue')// 注意不能使用 "@/view/index.vue"// vite 不识别的, 会出现找不到模块的情况},{name: 'details',path: '/details',component: () => import('../view/details.vue')},
]export default routes

配置好页面后，咱们打开 index.js 文件，做一下路由配置。

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'// 通过 createRouter 创建路由实例
// history: 用于路由实现历史记录, 
// 参数值为历史记录模式, 通过使用官方为我们提供方法(createWebHistory)即可。
const router = createRouter({// createWebHistory 创建history路由模式// createWebHashHistory 创建hash路由模式// createMemoryHistory 创建基于内存的历史记录history: createWebHistory(),// 路由表routes
})export default router

打开 这个文档，里面有更多配置。

好，配置工作完成，最后一步就是在 main.js 入口文件通过 use 引入注册。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'// 使用 createPinia 创建Pinia实例
import { createPinia } from 'pinia'// 引入路由
import router from './router/index.js'const app = createApp(App)// use
app.use(createPinia())// 注意: use 要在 mount 之前进行
app.use(router)
// 另外,这块可以采用链式调用
// 比如: createApp(App).use(router).mount('#app')app.mount('#app')

好了，所有配置工作就完成了。

基本使用

其实与 Vue2 中配套的 Vue-router 3.X 用法基本相同！

先来实现一下编程式与常规式跳转页面，说白了就是一个用 标签跳转，一个是用 JS 跳转。

随便找个页面，用 App.vue 也行，写入以下代码：

很简单，也很理解，只不过与 Vue2 稍微有那么一些差异。

路由传参 1

首先传参和接收参数的语法不同，另外还有一些注意的地方。

可以看到，已经传递过去了。

那么参数传过去了，目标路由页面该怎么接收呢？

咱们打开详情 details.vue 页面，来接收一下参数。

另外呢，咱们除了参数，还能拿到一些额外的参数。

加入打印代码：

console.log(router.currentRoute)

看，能得到页面路径等一些信息。

路由传参 2

前面看了简单的数据传参，这块来看一下传递复杂参数，数组、对象。

好，可以看到成功携带了参数。

那么参数传过去了，目标路由页面该怎么接收呢？

在接收之前呢，推荐大家通过配置路由表 props 属性的形式，完成更骚的操作。

具体怎么做呢，咱们打开 router -> routes.js 路由表文件。

在要接收对象参数的配置项中，加入以下代码。

// 路由表(一个首页, 一个详情页)
const routes = [{name: 'index',path: '/',component: () => import('../view/index.vue')// 注意不能使用 "@/view/index.vue"// vite 不识别的, 会出现找不到模块的情况},{name: 'details',path: '/details',component: () => import('../view/details.vue'),props(route) {// route: 路径/参数啥都有console.log(route)}},
]export default routes

当我们跳转到该页时，这个 props 就会自动执行，里面啥都有，可以做一些其他事情。

来，咱们打开 index.js 路由表，接着来写。

// 路由表(一个首页, 一个详情页)
const routes = [{name: 'index',path: '/',component: () => import('../view/index.vue')// 注意不能使用 "@/view/index.vue"// vite 不识别的, 会出现找不到模块的情况},{name: 'details',path: '/details',component: () => import('../view/details.vue'),// 另外 也能用多级es6对象解构 props({query:{name}}) { ... }props(route) {// route: 路径/参数啥都有// console.log(route)// 当路由执行到该项时, 自定义一些操作return route.query}},
]export default routes

好，注意啊，正题开始。

咱们打开详情 details.vue 页面，来接收一下参数。

路由传参 3

前面两个小节讲了：

• 普通的数值、字符串传参与接收。
• 复杂的对象、数组传参与接收。

大家回顾一下，咱们在复杂对象的传参时，是怎么写的。

先看这段代码：

router.push({path: '/details',//路径query: { name: '我爱你' }//参数
})

可以看到啊，咱们前面，路径那一块用的是 path 属性，也就是说对应路由表的 path 属性，如图。

其实这块，咱们还可以使用 name 属性，学过 Vue2 的都知道，没学过的呢，接着往下看。

另外，这个 query 属性，对应的是咱们要传递的参数数据。

与之对应的还有一个属性，它叫 param 属性，这玩意也是用来接收要传递的参数数据的。

但是呢，这俩属性别看都是用来传递参数的， Vue 分成了俩，就一定有它的道理。

// name + param
// params 传参数 (类似post)
// 路由配置path: "/index/:id" 或者 path: "/index:id",
// 不配置path, 第一次可请求, 刷新页面id会消失(刷新参数不会保留！)
// 配置path, 刷新页面id会保留(刷新参数会保留)
// 注意: 使用name别名跳转，必须要在路由中配置该别名，否则无效。
router.push({ name:'index', params: {id: '1'} })// path + query
// query传参数 (类似get, 浏览器地址url后面会显示参数)
// 路由path可不配置
// 刷新页面id会保留(刷新参数会保留)
router.push({ path:'/index', query: {id:'1'} })// 不难看出，携带参数路由跳转分别是 query / params ，前面也阐述了，非常类似 get / post，
// 其实 “直观” 的区别是 query 方式会在浏览器地址栏（URL）上显示参数，
// 而 params 则与之相反，不会显示参数。

SEO

vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueRouter4.x教程，Vue3-router4的使用，vue3.0 router(v4.X)使用，Vue3使用路由VueRouter4的简单示例，Vue 3 中基于 vue-router 4 的路由配置与使用，vue3 vue-router4安装和基础使用，Vue3 - 路由 Vue-router 4.X（配置与使用教程）。