vue3脚手架简单静态路由解读

更新时间：2023年10月23日 08:48:19 作者：weixin_48399505

这篇文章主要介绍了vue3脚手架简单静态路由,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3脚手架简单静态路由

1.安装路由

npm install vue-router@4

2.创建文件

router—index.js

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

// 创建路由实例并传递 `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的路由及静态路由和动态路由区别

路由主要分为以下几点：（图见）

静态路由与动态路由的区别

定义

静态路由：静态路由是在路由器中设置固定的路由表；除非网络管理员进行干预，否则静态路由表不会发生变化。
动态路由：由网络中的路由器之间相互通信，传递路由信息，利用收到的路由信息更新路由表的路由方式。

使用场景

静态路由：网络规模不大，拓扑结构固定的网络中。
动态路由：网络规模大，网络拓扑机构复杂的网络。

优点

静态路由：简单、高效、可靠、网络安全、转发效率高。
动态路由：灵活，能够适时适应网络结构的变化，无需管理员手工维护，减轻了管理员的工作负担。

缺点

静态路由：不能灵活的适应网络的动态变化。
动态路由：占用网络带宽（用于传输路由更新信息）。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue使用echarts定制特殊的仪表盘
这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue+vue-validator 表单验证功能的实现代码
这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-11-11
Vue slot插槽的使用详情
这篇文章主要介绍了Vue slot插槽的使用，在生活中很多地方都有插槽，电脑usb的插槽，插板当中的电源插槽，插槽的目的是为了让我们原来的设备具备更多的扩展性比如电脑的USB我们可以插入U盘，手机，鼠标，键盘等等，下面文章就来介绍Vue slot插槽是如何使用的
2021-10-10
Vue3中引入使用vant组件的教程详解
Vant是一个强大的移动端组件库,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要为大家介绍vue3中的vant组件引入使用的方法,希望对大家有所帮助
2023-10-10
vue-cli创建项目ERROR in Conflict: Multiple assets emit dif
最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下
2023-02-02
Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下
2022-12-12
vscode搭建vue环境完整图文教程(适合新手小白)
Vue框架的优秀设计和强大的生态系统成为了越来越多开发者选择Vue的原因,在实际项目过程中一个高效的开发环境能够大大提高开发效率,这篇文章主要给大家介绍了关于vscode搭建vue环境的相关资料,需要的朋友可以参考下
2023-10-10
vue实现百度搜索下拉提示功能实例
这篇文章主要介绍了vue实现百度搜索下拉提示功能实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
解决找不到模块“xxx.vue”或其相应的类型声明问题
这篇文章主要介绍了解决找不到模块“xxx.vue”或其相应的类型声明问题，具有很好的参考价值，希望对大家有所帮助。
2022-10-10
Vue在原窗口与新窗口打开外部链接的实现代码
这篇文章主要介绍了Vue如何在原窗口与新窗口打开外部链接,文中给大家提到了vue跳转外部链接的实现代码，本文给大家介绍的非常详细，需要的朋友可以参考下
2023-02-02