【前端】[vue3] vue-router使用-CSDN博客

本文介绍了如何在TypeScript项目中安装并配置VueRouter4，包括创建`index.ts`文件，定义路由规则，并在Vue组件中导入和注册路由器。还展示了如何使用`router-link`标签和编程式导航。

提示：我这边用的是typeScript语法，所以js文件的后缀都是ts。

安装vue-router：
（注意：vue2引用vue-router@3 vue3才引用vue-router@4）
```
npm install vue-router@4
```

src文件夹下面创建 router/index.ts（或index.js）：
在这里插入图片描述
测试代码 (注意，login.vue reg.vue 组件你可自己写测试页面)：

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

// typeScript 语法
const routes:Array<any> = [
    {
        path: "/",
        name: "home",
        component: () => import("../App.vue")
    },
    {
        path: "/login",
        name: "login",
        component: () => import("../components/login.vue")
    },
    {
        path: "/reg",
        name: "reg",
        component: () => import("../components/reg.vue")
    },
]

const router = createRouter({
    //  createWebHistory()：地址栏不带#号,createWebHashHistory：地址栏带#号
    history: createWebHashHistory(),
    routes
    })


 export default router