快捷導(dǎo)航

vue3腳手架簡單靜態(tài)路由解讀

更新時(shí)間：2023年10月23日 08:48:19 作者：weixin_48399505

這篇文章主要介紹了vue3腳手架簡單靜態(tài)路由,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3腳手架簡單靜態(tài)路由

1.安裝路由

npm install vue-router@4

2.創(chuàng)建文件

router—index.js

// vue-router中提供3種的路由模式
import { createWebHistory, createRouter } from 'vue-router'
const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/pages/home/index.vue')
    }
]

// 創(chuàng)建路由實(shí)例并傳遞 `routes` 配置
const router = createRouter({
    // hash 模式。
    history: createWebHistory(),
    routes
})
export default router

3.main.js文件引入

import router from './router'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(router).mount('#app')

4.app.vue

<router-view></router-view>

5.vite.config.js文件引入sass和src路徑

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'),
    }
  },
     // 全局 css 注冊
     css: {
      preprocessorOptions: {
      scss: {
          javascriptEnabled: true,
          additionalData: `@import "src/styles/common/style.scss";`
      }
      }
  },
})

vue的路由及靜態(tài)路由和動(dòng)態(tài)路由區(qū)別

路由主要分為以下幾點(diǎn)：（圖見）

靜態(tài)路由與動(dòng)態(tài)路由的區(qū)別

定義

靜態(tài)路由：靜態(tài)路由是在路由器中設(shè)置固定的路由表；除非網(wǎng)絡(luò)管理員進(jìn)行干預(yù)，否則靜態(tài)路由表不會(huì)發(fā)生變化。
動(dòng)態(tài)路由：由網(wǎng)絡(luò)中的路由器之間相互通信，傳遞路由信息，利用收到的路由信息更新路由表的路由方式。

使用場景

靜態(tài)路由：網(wǎng)絡(luò)規(guī)模不大，拓?fù)浣Y(jié)構(gòu)固定的網(wǎng)絡(luò)中。
動(dòng)態(tài)路由：網(wǎng)絡(luò)規(guī)模大，網(wǎng)絡(luò)拓?fù)錂C(jī)構(gòu)復(fù)雜的網(wǎng)絡(luò)。

優(yōu)點(diǎn)

靜態(tài)路由：簡單、高效、可靠、網(wǎng)絡(luò)安全、轉(zhuǎn)發(fā)效率高。
動(dòng)態(tài)路由：靈活，能夠適時(shí)適應(yīng)網(wǎng)絡(luò)結(jié)構(gòu)的變化，無需管理員手工維護(hù)，減輕了管理員的工作負(fù)擔(dān)。