Vue3 vue-router路由

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

（1）vue- router是Vue.js官方提供的路由插件，与vue.js深度集成，便于用户使用于构建单页面应用（SPA）。除此以外，路由是通过用户自定义的访问路径，将访问路径和组件映射到一起，从而当页面的访问路径的改变与组件的使用切换结合。
（2）由此可见学好vue-router对我们打好Vue的基础的重要性，刚好我在最近的项目开发中有用到路由映射，从而做个记录，供与大家一起探讨学习

一、vue-router的安装和基础使用

1.vue-router的安装

//在Windows的命令提示符cmd中通过命令行安装vue-router
npm install vue-router --save
//在模块化的工程中使用vue-router
1、导入路由对象
import { createRouter, createWebHistory } from 'vue-router'
2、创建路由实例
const routes = [{
	path:'',
	name:'',
	component:() => import("自定义访问路径")
}]

const router = createRouter({
	history: createWebHistory(),
	routes //必须传递
})
3、在vue实例中挂载创建的路由实例
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App).use(router).mount('#app')

路由的三个模式：createWebHistory：history路由模式；createWebHashHistory：hash路由模式；createMemoryHistory：基于内存的路由模式

2.vue-router的基础使用

代码如下（示例）：

vue-router的使用步骤：
1、创建路由组件test.vue
<template>
	<div>
		<h2>测试的路由组件</h2>
	</div>
</template>
//setup语法糖使用可以进我主页了解使用方法
<script setup>
	name: 'test'
</script>

2、配置路由组件和路由文件的映射关系index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [{
	path:'/test',
	name:'test',
	//@代表从根路径src开始
	component:() => import("@/test")
}]
const router = createRouter({
	history: createWebHistory(),
	routes //必须传递
})
3、在App.vue中使用配置好的路由
<template> 
	<div id='app'>
		//<router-link/>是vue-router的内置组件，会在编译时自动编译为<a>超链接标签
		<router-link to='/test'>测试页面</router-link>
		//<router-view/>是占位符，也就是点击<router-link/>之后会根据当前的自定义路径，动态渲染出选择的不同组件。
		<router-view/>
	</div>
</template>
<script setup>
	name:'App'
</script>

为了一进入页面就可以默认跳转到首页，并且自动渲染首页的组件，则需要在路由中多配置一个重定向映射即可，代码实例如下：

{
	path:'/',
	//重定向：redirect
	redirect:'/test'
}

总结

以上就是vue-router的基础内容，本文也仅仅简单介绍了vue-router的基础使用，而vue-router还提供了大量能使我们便捷切换组件页面的前端开发，由于时间有限，所以更多的vue-router使用将会在后续不断完善补充。