Vue3开发极简入门(10):路由&嵌套路由
电脑完蛋了，好不容易抢回来的文档
安装
npm install vue-router@4这是创建了一个项目之后，再添加路由的办法。一般来说都是项目初始化的时候就添加路由，可以看Vue3开发极简入门（1）：初始化
上面在问的时候，“是否引入 Vue Router 进行单页面应用开发？”，选“是”即可。
路由配置
新增文件src/router/index.ts：
import { createRouter, createWebHashHistory } from "vue-router";
import Car from '@/components/Car.vue';
import Driver from '@/components/Driver/index.vue'
import Applicant from '@/components/Applicant.vue'
import Staff from "@/views/Staff.vue";
import StaffInfo from "@/views/StaffInfo.vue";
const routes = [
{ path: '/', name: "index", component: Car },
{ path: '/driver', name: "driver", component: Driver },
{ path: '/applicant', name: "applicant", component: Applicant },
{
path: '/staff',
name: "staff",
component: Staff,
children: [
{
path: 'info',
name: "staffInfo"
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router说明：
- Car、Driver、Applicant是之前写的页面组件，在第一篇开头就说了，按照现行约定和最佳实践，这几个应该放在view或pages目录下面，components应该放一些可复用的组件，当时就是纯省事儿，放components了。后面的Staff、StaffInfo是为了本节内容新写的，就放views了。我这边也是为省事，以前的就不挪了。
- 这个代码应该是很清晰了，路由、嵌套路由（children），都不用解释。
- 我设置了Car的path为“/”。如果整个系统没有一个路径为“/”的组件，控制台会报
[Vue Router warn]: No match found for location with path "/";
其实倒没啥影响。
- 每个路由都配了name，是选配，但是在路由传参的时候很重要，建议都配上，详情后叙。
- 嵌套路由的path，最前面不用“/”。
- 嵌套路由的写法很重要，大家注意一下，详情后叙。
- history: createWebHashHistory()。是个关键点。这是不同的历史模式。
Memory模式（createMemoryHistory）。适合Node、SSR（服务端渲染），不推荐（但也可以）在浏览器应用中使用。
Hash模式（createWebHashHistory）。URL上会带一个#。对SEO不好，但是不需要对服务器层面进行特殊处理。如果是ToC的页面，不建议使用。本文采用此模式。
HTML5模式（createWebHistory）。URL不会带#，对SEO有好，但是需要根据服务器（Apache、Nginx、IIS等）的不同进行相应的配置，官网有说明，这也是服务端运维的知识点，本文不赘述。
修改main.ts：
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')很简单，不解释。
修改App.vue：
<template>
<div id="app">
<header class="banner">
<h1>B端管理系统</h1>
</header>
<main class="container">
<aside class="sidebar">
<nav>
<ul>
<li><RouterLink to="/" active-class="activeLink">首页</RouterLink></li>
<li><RouterLink :to="{name:'driver'}" active-class="activeLink">司机管理</RouterLink></li>
<li><RouterLink :to="{path:'/applicant'}" active-class="activeLink">人员管理</RouterLink></li>
<li><RouterLink :to="{path:'/staff'}" active-class="activeLink">员工管理</RouterLink></li>
<!-- 添加更多导航项 -->
</ul>
</nav>
</aside>
<section class="content">
<RouterView/>
</section>
</main>
</div>
</template>
<script lang="ts" setup name="App">
</script>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.banner {
background-color: #42b983;
color: white;
width: 100%;
padding: 20px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px;
height: calc(100vh - 120px);
width: 1024px;
}
.sidebar {
width: 250px;
background-color: #34495e;
color: white;
padding: 20px;
box-sizing: border-box;
}
.sidebar nav ul {
list-style-type: none;
padding: 0;
}
.sidebar nav ul li {
margin: 15px 0;
}
.content {
flex: 1;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
background-color: #ecf0f1;
}
.activeLink{
color: white;
}
</style>- 样式是我网上瞎找的，不重要，一般都会用现有的UI框架（Element Plus等）。
- RouterView，也可以写作<router-view></router-view>。就是显示组件的区域，有点类似于以前的iframe。
- RouterLink，也可以写作<router-link></router-link>，就好像a标签一样。跳转页面的写法有：
to="path"。
:to="{name:'路由配置的name'}"。
:to="{name:'路由配置的path'}"。
至此，就可以通过点击，跳转至对应的组件了。Staff、StaffInfo后面讲传参的时候用。