一、安装

npm install vue-router

二、router.js src目录下新建router.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    { path: "/", component: () => import('@/pages/Index.vue'), name: "index" },
];

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

export default router;

相应的，要在src/pages目录里新建Index.vue配合设置的路由。 三、main.js加入router

import router from "@/router";

const app = createApp(App);
app.use(router);
app.mount('#app');

四、模板里使用

import { useRouter } from "vue-router";

const router = useRouter();

// 使用示例：跳转到首页
router.push({ name: "index" });

1. 获取当前路由信息

   router.currentRoute.value

   值得注意的是在App.vue中要加,不然不跳转，即根节点只有一个路由节点“router-view”：

   <router-view />

   转载于：https://tryatry.com/post/649cd7be54ac2