Vue3开发极简入门(10):路由&嵌套路由

精选文章moguli202025-05-08 14:42:258A⁺A^-

电脑完蛋了，好不容易抢回来的文档

安装

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>