【Vue3路由】一步步实现路由切换

step1：src目录下新建router文件夹=>新建index.ts

import { createRouter, createWebHistory } from "vue-router";
import Home from "~/pages/Home.vue";
import About from "~/pages/About.vue"

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
];
//创建路由对象
const router = createRouter({
  routes,
  history: createWebHistory(),
});

export default router;

step2：main.ts中

import router from "~/router/index";
...
app.use(router).mount("#app");

step3：App.vue中需要放页面的地方放 router-view

<template>
  <el-config-provider namespace="ep">
    <BaseHeader />
    <div class="flex main-container">
      <BaseSide />
      <router-view></router-view>

    </div>
  </el-config-provider>
</template>

到这步之后可以在地址栏切换页面了，下一步是点击跳转到目标页面

step4：点击调整

方法1（router-link）直接用router-link包裹按钮或图标等需要点击的标签

  <router-link to="/about">
      <el-menu-item index="1">
        <el-icon><location /></el-icon>
        <template #title>about页面</template>
      </el-menu-item>
    </router-link>

方法2 在需要点击跳转的标签加上 @click="handleChange"

import { useRouter } from "vue-router";
const router = useRouter();

const handleChange = () => {
  router.push("/about");
};