快捷導(dǎo)航

vite+vue3中如何使用router

更新時(shí)間：2023年06月28日 14:56:29 作者：cv魔法師

這篇文章主要介紹了vite+vue3中如何使用router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vite+vue3中使用router

用vue3官方推薦的構(gòu)建工具vite創(chuàng)建vue3項(xiàng)目的時(shí)候，項(xiàng)目中是沒有像vue-cli一樣可以默認(rèn)引入路由的，這就很難受了，對(duì)于我這種習(xí)慣vue-cli配置好的人來說,有點(diǎn)不習(xí)慣。

下面我們就手動(dòng)引入路由。

npm下載vue3對(duì)應(yīng)的路由，注意的是vue3默認(rèn)使用的是4.0+版本的路由，vue2中是不支持的，我們直接下載最新版本的router

npm i vue-router -S

接下來在src目錄下建立個(gè)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文件中導(dǎo)入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

創(chuàng)建路由文件

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
            }
        ]
    }
]
//路由對(duì)象
const router=createRouter({
    history:createWebHistory(),
    routes
})
//導(dǎo)出路由對(duì)象，在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')