vite+vue3中如何使用router
2023-07-07 23:23 作者:bili_30119966532 | 我要投稿
vite+vue3中使用router
用vue3官方推薦的構(gòu)建工具vite創(chuàng)建vue3項目的時候，項目中是沒有像vue-cli一樣可以默認(rèn)引入路由的，這就很難受了，對于我這種習(xí)慣vue-cli配置好的人來說,有點不習(xí)慣。
下面我們就手動引入路由。
npm下載vue3對應(yīng)的路由，注意的是vue3默認(rèn)使用的是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文件中導(dǎo)入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創(chuàng)建路由文件
?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})//導(dǎo)出路由對象，在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')標(biāo)簽：
