写在前面
前段时间做了一个管理后端项目，使用的开源项目，技术使用的是vue3+typescript。自己对vue-router的使用并不是熟练，在这里记录一下最近的整理结果。
实现步骤
1.创建路由文件
假定现在有两个页面路由/、/about分别对应访问Home和About页面，这里需要新建两个Vue页面文件，放在src/views目录下。
src/views/Home.vue文件内容：
<template>
<h1>我是home</h1>
</template>
src/views/About.vue文件内容：
<template>
<h1>我是about</h1>
</template>
2.使用Vue Router定义路由
这个步骤是使用Vue Router的重中之重。随着页面路由的丰富，日后定义的路由内容也会在此基础上不断丰富。文件路径：src/router/index.ts
import { createMemoryHistory, createRouter } from 'vue-router'
// 1.定义路由组件（通过导入的方式）
const Home = ()=>import ('../views/Home.vue')
import About from '../views/About.vue'
// 2.定义路由，让路由映射到对应的组件中
const routes =[
{
path:'/home',
name:'home',
component:Home
},
{
path:'/about',
name:'about',
component:About
}
]
// 3.创建路由实例，把定义的路由挂载到路由实例中
const router = createRouter({
history: createMemoryHistory(),
routes
})
// 导出路由实例
export default router
3. 添加路由容器
路由容器用于展示不同URL对应的页面内容，通过Vue Router提供的router-view自定义标签在主要布局文件中添加页面容器，router-view将显示与URL对应的组件。可以把它放在任何地方，以适应布局。文件路径：src/App.vue
<template>
<p>
<strong>Current route path:</strong> {{ $route.fullPath }}
</p>
<div>
<ul class="nav">
<li><router-link to="/home">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.nav {
display: flex;
}
.nav li {
width: 100px;
list-style: none;
}
</style>
4.将路由实例挂载到根实例上，以便我们在整个应用中使用router实例
通过use方法将路由实例应用到根实例上，修改src/main.ts文件如下:
import { createApp } from 'vue'
import router from './router/index'
import './style.css'
import App from './App.vue'
createApp(App)
.use(router) // 注册路由
.mount('#app')
扩展
实现路由跳转的几种方式
vue-router有两种实现路由跳转的方式：router-link标签跳转和JS脚本跳转。
router-link跳转
<router-link to="/home">Home</router-link>
// 带参数跳转
<router-link :to="{ path: '/home', query: { id: 1 } }">Home</router-link>
<router-link :to="{ name: '/home', params: { id: 1 } }">Home</router-link>
JS脚本跳转
除了使用创建a标签来定义导航链接外，还可以通过JS脚本实现跳转，即借助router实例方法（push、replace、go等），通过编写JS脚本跳转。
// 字符串路径
router.push('/home')
// 带路径的对象
router.push({path:'/home'})
// 命名路由
router.push({name:'home',params:{id:1}})
// 带查询参数,结果是/home?id=1
router.push({path:'/home',query:{id:1}})
// 带hash,结果是/home#1
router.push({path:'/home',hash:'#1'})
子路由配置
/user/profile /user/posts
┌──────────────────┐ ┌──────────────────┐
│ User │ │ User │
│ ┌──────────────┐ │ │ ┌──────────────┐ │
│ │ Profile │ │ ●────────────▶ │ │ Posts │ │
│ │ │ │ │ │ │ │
│ └──────────────┘ │ │ └──────────────┘ │
└──────────────────┘ └──────────────────┘
- 在views中新增User.vue文件，内容如下：
<template>
<div>
<h1>我是user</h1>
<h2>User {{ $route.params.id }}</h2>
</div>
<div class="container">
<div id="siderbar">
<ul>
<li><router-link to="/user/profile">userProfile</router-link></li>
<li><router-link to="/user/posts">userPosts</router-link></li>
</ul>
</div>
<div class="main-body">
<router-view />
</div>
</div>
</template>
在App.vue中的 是一个顶层的router-view。它渲染顶层路由匹配的组件。 同样地，被渲染的组件User.vue也可以包含自己嵌套的router-view
- 在src/router/index.ts增加如下内容
{
path: '/user',
name: 'user',
component: User,
children: [
{
// 当 /user/profile 匹配成功
// UserProfile 将被渲染到 User 的 <router-view> 内部
path: 'profile',
component: UserProfile,
},
{
// 当 /user/posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: 'posts',
component: UserPosts,
},
],
},
在路由配置中子路由是通过children配置实现，子路由children配置是一个数组，每一个数组项对应一个组件(component)，它的配置与一级路由具有相同的属性，可以设置路径path、命名路由name及定义访问的component。
路由设置404页面
在src/router/index.ts增加如下内容
{
path: '/:pathMatch(.*)*',
name: '404',
component: NotFound
}
path: '/:pathMatch(.*)*' 解释:匹配任何路径，无论路径是什么。
-
path是路由的路径模式。 -
/:pathMatch(.*)*:是一个正则表达式路径模式。-
:表示这是一个动态段。 -
pathMatch是动态段的名称，可以任意命名。 -
(.*)*是一个正则表达式，表示匹配任何路径。(.*)匹配任何字符（除了换行符）零次或多次。*表示前面的模式可以出现零次或多次。
-
路由匹配规则
-
Vue Router遵循最长匹配原则，即如果路由在设置中有最长匹配项，将会加载这个匹配项指向的组件内容
-
如果多个路由配置的path规则一模一样，Vue Router则是按照先定义先匹配的原则进行匹配，比如，笔者同时在routes中定义了两条path为“/”的路由
