vite+vue3中如何使用router
作者：cv魔法师
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vite+vue3中使用router
用vue3官方推荐的构建工具vite创建vue3项目的时候，项目中是没有像vue-cli一样可以默认引入路由的，这就很难受了，对于我这种习惯vue-cli配置好的人来说,有点不习惯。
下面我们就手动引入路由。
npm下载vue3对应的路由，注意的是vue3默认使用的是4.0+版本的路由，vue2中是不支持的，我们直接下载最新版本的router
npm i vue-router -S
接下来在src目录下建立个router文件夹,router文件夹下新建index.ts文件(我这里使用的是ts,js也一样)
在index.ts中写如下代码
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
- 安装插件
open in browser v2.0.0 Element UI Snippets v0.7.2 Vue Language Features (Volar) v1.2.0
- 安装路由
npm install vue-router@4
- 创建路由文件
src/router/index.ts
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 router- main.js引入
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'
//全局引入css
import './assets/css/glob.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。