- 安装插件
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')