vite创建vue项目，配置路由Vue Router

轻浮的大象

于 2021-10-30 17:11:09 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45562888/article/details/121053544

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装和配置VueRouter。首先通过npm安装vue-router@4，然后创建src/router/index.js配置路由，导入必要的模块并定义路由。接着，在新建的routes.js中设置各个页面的路由。最后，在main.js中引入并使用路由。同时，为支持别名@，修改了Vite的配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装路由 Vue Router

npm install vue-router@4

配置路由文件:src/router/index.js（建立路由js）

// 引入 router
import { createRouter, createWebHistory } from 'vue-router'
// 引入路由各页面配置
import routes from './routes'
// 配置router对象
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

新建一个js文件叫“routes”，内容如下(可以自己继续添加其他页面)：

const routes = [
    {
        path: '/',
        name: 'index',
        title: '首页',
        component: () => import('@/components/index.vue'), //.vue不能省略
    }
]
export default routes

在main.js中使用路由

import { createApp } from 'vue'
import App from './App.vue'
// 引入上面新建的路由文件
import router from './router/index'

const app = createApp(App)
//使用路由
app.use(router)
app.mount('#app')

修改Vite的配置文件，支持alias别名@

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
    	alias: {
			'@': path.resolve(__dirname, 'src'),
		}
	},
	plugins: [vue()]
})