vue 路由 vue-router | 工作生活记录12

一、安装

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