Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法的過程詳解
更新時間：2022年11月11日 09:26:25 作者：曲鳥
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法，本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、使用路由
1）安裝vue-router
yarn add vue-router
2）注冊路由
將兩個組件Home、Project注冊到路由中：
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import App from "./App.vue";
const Home = { render(){ return 'Home'} }
const Project = { render(){ return 'Project'} }
const routes = [
{ path: '/', component: Home },
{ path: '/project', component: Project },
]
const app = createApp(App);
const router = createRouter({
// 4. 內(nèi)部提供了 history 模式的實(shí)現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的縮寫
});
app.use(router);
app.mount("#app");3）使用路由
App.vue文件加入如下代碼：
<template> <router-view></router-view> </template>
效果如下：
二、配置vite.alias簡化導(dǎo)入寫法
1）安裝@types/node
yarn add @types/node
2）修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
}
})3）修改tsconfig.JSON （不修改沒有提示）
在compilerOptions中加入下面配置：
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"] //格式一定要寫對符號*不能少不然找不到@或者沒有代碼提示
},
效果如下：
到此這篇關(guān)于Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法的文章就介紹到這了,更多相關(guān)vue3 vite.alias路由配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)三級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
在Vue?3中，可以使用多種方式來使用SVG圖標(biāo)，這篇文章主要為大家總結(jié)了五個常用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解下2023-08-08
這篇文章主要介紹了Vue中的components組件與props的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件的制作過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個生命周期鉤子。本文將對vue指令的工作原理進(jìn)行相應(yīng)介紹2021-06-06
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了詳解從Vue-router到html5的pushState，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07