Vue-Router4 学习记录

初始化

首先我们先对 vue3 项目进行初始化操作：
1.引入 vue-router 最新版

终端输入： 
npm install vue-router
1
2

// 卸载vue-router
npm uninstall vue-router 

// 安装低版本
npm i vue-router@4.0.1 
1
2
3
4
5

2.创建两个页面用于路由跳转

1. 在 src 目录下创建 views 文件夹，然后在 views 文件夹中创建两个页面，分别为 Home.vue 和 About.vue

页面代码如下：
// \src\views\Home.vue


// \src\views\About.vue

1
2
3
4
5
6

3.在 src 目录下创建 router 文件夹，然后在里面添加 index.js 文件

import { createRouter, createWebHashHistory } from 'vue-router'
//引入组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const router = createRouter({
  //哈希模式
  history: createWebHashHistory(), 
  routes: [ 
  // 通过数组对象的形式，配置路径对应展示的组件。
    {
      path: '/',
      name: '/',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
// 将 router 暴露出去  （export default 抛出方式）
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.在main.js 把 router 引入 Vue

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from '../src/router'

// 生成 app 实例。
const app = createApp(App)
// 通过 use 引入 路由实例。
app.use(router)
// 将实例挂载到 #app 节点上。
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12

报错提醒： Uncaught TypeError: createApp(…).mount(…).use is not a function at main.js?t=1670145302257:6:30
createApp(App).mount(‘#app’).use(router) 为错误写法

5.修改 App.vue 代码：

router-view   你可以把它放在任何地方，以适应你的布局。
1
2
3
4
5
6
7

配置完毕，在终端运行 npm run dev运行项目
http://127.0.0.1:5173/#/ --匹配Home页面
http://127.0.0.1:5173/#/about --匹配About页面

路由跳转

1.组件形式跳转

// App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2,方法形式跳转

// Home.vue


// setup 语法糖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

路由传参

路由参数传递有两种形式，分别为使用params参数或query参数。
1.通过query参数

// Home.vue
方法一：



方法二：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// About.vue




1
2
3
4
5
6
7
8
9
10
11

Property “home” was accessed during render but is not defined on instance.
问题点：query: { name: home } 字符串必须用‘’包裹起来

2，通过params参数
使用这种形式传参之前，在package.json页面查看
"dependencies": { "vue": "^3.2.41", "vue-router": "^4.1.6" //确认vue-router版本 },
因为vue-router v4.1.4 移除了未定义的params传递，如果我们用 params: { name: 'home' }来传递参数，控制台提示：

[Vue Router warn]: Discarded invalid param(s) “name” when navigating.
See
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
for more details.
[Vue路由器警告]:丢弃无效的参数导航时输入“name”。详情请参见https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22。

正确使用方法：
(1).切换低版本

// 卸载vue-router
npm uninstall vue-router 
// 安装低版本
npm i vue-router@4.0.1 
本方法来源：http://www.jkjk.icu/#/note-info/80
1
2
3
4
5

//Home.vue
方法一：


方法二:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// About.vue


1
2
3
4
5
6
7
8

(2).在新版本中用其他方法传参

例如：
Pass the data as state to save it to the History API state:
将数据作为状态传递，将其保存到History API状态:

// Home.vue

1
2
3
4
5
6
7
8

// About.vue



1
2
3
4
5
6
7
8
9

为什么会出现前端路由： 为了解决单页面网站，通过切换浏览器地址路径，来匹配相对应的页面组件这件事。