猫薄荷

主题

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

安装router ​

  • 在vscode中来到你的项目文件夹中
  • 在终端中执行命令安装router：npm i vue-router -D
  • 等待下载安装

  • 安装好以后，在项目目录的src目录内，新建目录 modules 用于存放插件模块
  • 在moudules内新建路由配置文件 route.js

  • 里面写如下内容：
import { createRouter, createWebHistory } from "vue-router"

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

export default router

修改main.js ​

  • 导入router ： import router from "./modules/router"
    • 使用router ： app.use(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 ​

  • 在src目录下，新建文件夹pages，用于存放页面
  • 在里面新建2个示例页面：hello.vue，home.vue
    • hello.vue

  • -
    • home.vue

  • 在App.vue中使用路由，修改App.vue：
<template>
    <router-view></router-view>
</template>

在router.js中配置页面 ​

  • 上面两个页面（hello.vue和home.vue）新建后路由是不知道的，我们需要在配置文件router.js中告诉它，因此需要修改router.js
  • 在routes数组中增加对应页面的配置：
        {
            name:"主页",
            component: () => import('../pages/home.vue')
        },
        {
            name:"欢迎",
            path:"/hello",
            component: () => import('../pages/hello.vue')
        }
  • -
    • name：页面名称，随意
    • path：在浏览器访问的时候的路径
    • component：导入访问的页面文件
  • 由于第一个就是默认的主页，所以不需要写path
  • 访问第二个的浏览器路径就是：http://localhost:3000/hello
  • router.js总体代码：
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

  • 到这里基本就配置完成了，运行项目看看：npm run dev
  • 主页：

  • 欢迎页：

配置文件路由 ​

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

  • 安装文件路由插件
  • npm i -D vite-plugin-pages

  • 在vite.config.js中增加配置：
import Pages from "vite-plugin-pages"

export default defineConfig({
    plugins:[

        //...
        Pages(),
    ]
})
  • 修改后的vite.config.js ：

  • 修改router.js
  • 从pages文件夹中导入
  • 去掉routes内容
import { createRouter, createWebHistory } from "vue-router"
import routes from "~pages";

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

export default router
  • 到这里就完成了，但要注意的是，页面里主页不是home.vue了，默认的是index.vue，由于我们示例中并没有这个文件，因此访问http://localhost:3000就会报警告。而访问原来的home.vue就需要改为http://localhost:3000/home