[vue/vite/router]在vscode中给vite项目安装路由router/配置文件路由

/ 1,802评论 / 9511阅读 / 2点赞

安装router

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

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

export default router

修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./modules/router"

const app = createApp(App)

app.use(router)
app.mount('#app')

创建pages

<template>
    <router-view></router-view>
</template>

在router.js中配置页面

        {
            name:"主页",
            component: () => import('../pages/home.vue')
        },
        {
            name:"欢迎",
            path:"/hello",
            component: () => import('../pages/hello.vue')
        }
import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
    routes: [
        {
            name:"主页",
            component: () => import('../pages/home.vue')
        },
        {
            name:"欢迎",
            path:"/hello",
            component: () => import('../pages/hello.vue')
        }
    ],
    history: createWebHistory()
})

export default router

配置文件路由

当我们增加页面时,总要在router中配置一下,一旦页面多起来就很麻烦,所以可以安装文件路由,也就是以文件夹pages内的文件结构自动作为访问路径。

import Pages from "vite-plugin-pages"

export default defineConfig({
    plugins:[

        //...
        Pages(),
    ]
})
import { createRouter, createWebHistory } from "vue-router"
import routes from "~pages";

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

export default router

发表回复

您的电子邮箱地址不会被公开。