1：安装路由 npm install --save vue-router

2：配置独立的路由文件 在src下创建文件夹router,再创建文件index.js

//创建路由实例
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";

const routes = [
  { path: "/", component: HomeView },
    //异步加载AboutView组件，当点击到才加载，优化速度
  { path: "/about", component: () => import("@/views/AboutView.vue") },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

3：创建views存放页面，HomeView.vue和AboutView.vue

<template>
  <div>关于页面</div>
</template>

<script>
export default {
  name: "AboutView",
};
</script>

<style scoped></style>

<template>
  <div>这是主页</div>
</template>

<script>
export default {
  name: "HomeView",
};
</script>

<style scoped></style>

4：引入注册路由到项目中

import "./assets/main.css";

import { createApp } from "vue";
import App from "./App.vue";
import vueRouter from "@/router/index";

let app = createApp(App);
app.use(vueRouter);
app.mount("#app");

5：指定路由显示的入口，和指定路由跳转

<template>
  <nav>
    <router-link to="/">主页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>
</template>

6：注意：如果中的属性to使用名字调整路由需要使用：to来绑定名字

    <router-link :to="{name:home}">主页</router-link>

7：嵌套路由的使用，创建相关子组件文件夹与文件

//异步加载AboutView组件，当点击到才加载，优化速度
{
  path: "/about",
  name: "about",
  component: () => import("@/views/AboutView.vue"),
  //重定向(或者不需要重定向，直接将子路径us修改为'')，就是显示组件AboutView的同时，也显示组件AboutUs
  redirect: "/about/us",
  children: [
    {
      //注意，以 "/“ 开头的嵌套路径将被视为根路径，子路径都不要以“/”开头，自动并且父路径
      path: "us",
      name: "aboutUs",
      component: () => import("@/views/aboutSub/AboutUs.vue"),
    },
    {
      path: "info",
      name: "aboutInfo",
      component: () => import("@/views/aboutSub/AboutInfo.vue"),
    },
  ],
},

7-1：AboutView组件

<template>
  <div>关于页面</div>
  <router-link to="/about/us">我们</router-link> |
  <router-link to="/about/info">信息</router-link>
  <!--  指定子路由显示的位置，以前不写children的时候，点击路由router-link会做主页的<router-view>显示组件，不会在如下位置显示-->
  <router-view></router-view>
</template>

<script>
export default {
  name: "AboutView",
};
</script>

<style scoped></style>
    

7-2：AboutUs组件

<template>
  <p>关于我们</p>
</template>

<script>
export default {
  name: "AboutUs",
};
</script>

<style scoped></style>

7-3：AboutInfo组件

<template>
  <p>关于信息</p>
</template>

<script>
export default {
  name: "AboutInfo",
};
</script>

<style scoped></style>