快捷導(dǎo)航

Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法的過(guò)程詳解

更新時(shí)間：2022年11月11日 09:26:25 作者：曲鳥(niǎo)

這篇文章主要介紹了Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、使用路由

1）安裝vue-router

yarn add vue-router

2）注冊(cè)路由

將兩個(gè)組件Home、Project注冊(cè)到路由中：

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)。為了簡(jiǎn)單起見(jiàn)，我們?cè)谶@里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的縮寫(xiě)
});
app.use(router);
app.mount("#app");

3）使用路由

App.vue文件加入如下代碼：

<template>
  <router-view></router-view>
</template>

效果如下：

在這里插入圖片描述

二、配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法

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 （不修改沒(méi)有提示）

在compilerOptions中加入下面配置：

 "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]     //格式一定要寫(xiě)對(duì)符號(hào)*不能少不然找不到@或者沒(méi)有代碼提示
    },

在這里插入圖片描述

效果如下：

在這里插入圖片描述

到此這篇關(guān)于Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法的文章就介紹到這了,更多相關(guān)vue3 vite.alias路由配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決VUE-Router 同一頁(yè)面第二次進(jìn)入不刷新的問(wèn)題
這篇文章主要介紹了解決VUE-Router 同一頁(yè)面第二次進(jìn)入不刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
詳解Vue適時(shí)清理keepalive緩存方案
說(shuō)到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時(shí)清理keepalive緩存方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue遞歸實(shí)現(xiàn)三級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)三級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue3使用svg圖標(biāo)的方式總結(jié)
在Vue?3中，可以使用多種方式來(lái)使用SVG圖標(biāo)，這篇文章主要為大家總結(jié)了五個(gè)常用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解下
2023-08-08
Vue中的components組件與props的使用解讀
這篇文章主要介紹了Vue中的components組件與props的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue非父子組件之間的通信方式詳解
在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue表單驗(yàn)證插件的制作過(guò)程
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件的制作過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
分析Vue指令實(shí)現(xiàn)原理
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個(gè)生命周期鉤子。本文將對(duì)vue指令的工作原理進(jìn)行相應(yīng)介紹
2021-06-06
vue-router 學(xué)習(xí)快速入門(mén)
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門(mén)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
詳解從Vue-router到html5的pushState
這篇文章主要介紹了詳解從Vue-router到html5的pushState，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07