代码模版-vue3使用router的写法

文章目录

步骤一：

vue3 一般使用 vue-router，npm 下载 vue-router 包

步骤二：
vue3 项目中 src 下创建 router/index.js，其中主要声明路由
同时在 src 下创建 views 文件夹，其中主要是 vue 组件，来和 index.js 中的路由对应

- src
    - router
        - index.js
    - views
        - login.vue

步骤三：
index.js 中有

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

// 这里展现有哪些路由路径
const routes = [
    {
        name: '登录',
        path:'/login',
        component: () => import('../views/login.vue'), // 将路径和 component 绑定
    },
    {
        // 第二个路由
    },
    {
        // 第三个路由
    }
]

// createRouter() 来创建路由
const router = createRouter({
    routes, // 路由路径哪些
    history: createWebHistory(),
})

// 导出这个变量
export default router

步骤四：
在 src 下的 main.js 中添加使用路由，新增

import router from './router'

app.use(router)

步骤五：
在 App.vue 这个根组件中的 template 中添加

<router-view />

最后 run 起来查看是否生效即可