Vue3.x中的vue-router4.x的使用

前言

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

vue-router3和vue-router4区别不是很大，但是还是有一些语法上的差异。

路由配置的差异

1. vue-router4 的 createRouter() 替换vue-router3 的 new Router()
2. router4 的路由模式由 createWebHistory() 替换router3 mode: ‘history’
3. main.js中 router4 的 .use(router) 替换router3 new Vue({ router })

路由模式区别：

vue-router4基本使用

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes'

const router = createRouter({ // 区别1
	history:createWebHashHistory(),  // 区别2
	routes 
})

export default router 


// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router).mount('#app');  // 区别3

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

路由跳转及参数的使用

在vue3.x setup中 ， useRouter、useRoute通常用来：

1. useRouter：进行路由跳转
2. useRoute：获取路由参数

<script setup>
	import { useRoute, useRouter } from 'vue-router'
	const router = useRouter();
	const route = useRoute();

	console.log(route); // 获取路由参数
	router.push('/user'); // 进行路由跳转
</script>

1
2
3
4
5
6
7
8
9

vue-router 3.x中 获取路由参数：

//router3和router4一样
在组件中： {{$route.query.id}} 或 {{$route.params.id}}

//router3和router4一样，但是在setup函数就不一样
在 JS 中： this.$route.query.id 或 this.$route.params.id

//setup函数中
<script setup>
	import { useRoute} from 'vue-router'
	const route = useRoute();

	console.log(route.params.id); // 获取路由参数
</script>


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

通配符 * 被取消

//vue-router 3
{
 path:'*',
 component:()=>import("../components/NotFound.vue")
}
 
//vue-router 4
{
 path:'/:pathMatch(.*)*',
 component:()=>import("../components/NotFound.vue")
}
//是一个正则表达式
1
2
3
4
5
6
7
8
9
10
11
12

keep-alive使用

可利用keep-alive的 include 或 exclude 属性（include 和 exclude 包含的name 是组件的name不是router name）来设置缓存：

• include 值为字符串或者正则表达式匹配的组件name会被缓存。
• exclude 值为字符串或正则表达式匹配的组件name不会被缓存。

vue2写法：

<keep-alive exclude="Home">  // 缓存除了Home外的所有组件
   <router-view>router-view>
keep-alive>
1
2
3

vue3写法：

	<router-view v-slot="{ Component }">
	    <keep-alive :include="includeList">
	        <component :is="Component" />
	    </keep-alive>
	</router-view>

<script setup>
import { ref } from 'vue';

// 需要缓存的组件name值
const includeList = ref(['login', 'user']); // 缓存login和user组件
</script>

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

注意：keep-alive 必须用在 router-view 内部

其他的注意事项

1. router-link 移除了一部分属性
   移除 append 属性
   tag 被移除
   event 被移除
2. route 的 parent 属性被移除
3. pathToRegexpOptions选项被移除，其他内容替换
4. routes选项是必填项
5. 跳转不存在的命名路由报错
   之前跳转到不存在的路由，页面是空的，会重定向根路径，这是不合理的，所以vue3报错了。
6. 缺少必填参数会抛出异常
7. 命名子路由如果 path 为空的时候，不再追加 /
   之前生成的 url 会自动追加一个 / ，如：“/user/”。副作用：给设置了 redirect 选项的子路由带来副作用。

文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。