Vue3使用路由及配置vite.alias簡化導入寫法的過程詳解

更新時間：2022年11月11日 09:26:25 作者：曲鳥

這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導入寫法，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、使用路由

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. 內部提供了 history 模式的實現(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簡化導入寫法

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/*"]     //格式一定要寫對符號*不能少不然找不到@或者沒有代碼提示
    },

在這里插入圖片描述

效果如下：

在這里插入圖片描述

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

您可能感興趣的文章:

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