vite+vue3中如何使用router
2023-07-07 23:23 作者:bili_30119966532 | 我要投稿
vite+vue3中使用router
用vue3官方推荐的构建工具vite创建vue3项目的时候，项目中是没有像vue-cli一样可以默认引入路由的，这就很难受了，对于我这种习惯vue-cli配置好的人来说,有点不习惯。
下面我们就手动引入路由。
npm下载vue3对应的路由，注意的是vue3默认使用的是4.0+版本的路由，vue2中是不支持的，我们直接下载最新版本的router
1
npm i vue-router -S接下来在src目录下建立个router文件夹,router文件夹下新建index.ts文件(我这里使用的是ts,js也一样)
在index.ts中写如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createRouter, createWebHistory } from "vue-router";import home from "../view/Home.vue";const routes:any = [ { path: '/', component: home },]const router = createRouter({ history: createWebHistory(), routes})export default router然后main.ts文件中导入router,并全局使用
vite+vue3整合router
安装插件
1
2
3
open in browser v2.0.0Element UI Snippets v0.7.2Vue Language Features (Volar) v1.2.0安装路由
1
npm install vue-router@4创建路由文件
src/router/index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'import Login from '@/components/Login.vue'import Home from '@/components/Home.vue'import Welcome from '@/components/Welcome.vue'import User from '@/components/system/user/index.vue'const routes:Array<RouteRecordRaw>=[ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [ { path: '/welcome', component: Welcome }, { path: '/user', component: User } ] }]//路由对象const router=createRouter({ history:createWebHistory(), routes})//导出路由对象，在main.js中引用export default routermain.js引入
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import router from "./router/index";import store from "./store/index"import 'element-plus/dist/index.css'//全局引入cssimport './assets/css/glob.css'const app = createApp(App)app.use(ElementPlus)app.use(router)app.use(store)app.mount('#app')