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中的input输入框进行邮箱验证方式

    对vue中的input输入框进行邮箱验证方式

    这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue路由传参及props解耦深入分析

    Vue路由传参及props解耦深入分析

    vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue中实现视频播放的示例详解

    Vue中实现视频播放的示例详解

    这篇文章主要为大家学习介绍了基于Vue如何实现视频播放的功能,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解一下
    2023-08-08
  • vue登录路由权限管理的项目实践

    vue登录路由权限管理的项目实践

    在开发Web应用程序时,常常需要进行登录验证和权限管理,本文主要介绍了vue登录路由权限管理的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • spring-cloud-stream的手动消息确认问题

    spring-cloud-stream的手动消息确认问题

    这篇文章主要介绍了spring-cloud-stream的手动消息确认问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解决Vue+Element ui开发中碰到的IE问题

    解决Vue+Element ui开发中碰到的IE问题

    今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • .env在mode文件中如何添加注释详解

    .env在mode文件中如何添加注释详解

    这篇文章主要为大家介绍了.env在mode文件中如何添加注释详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    这篇文章主要介绍了Vue项目打包部署到iis服务器的配置方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue刷新后瞬间闪烁,无法解析的问题

    vue刷新后瞬间闪烁,无法解析的问题

    这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue项目中引入noVNC远程桌面的方法

    vue项目中引入noVNC远程桌面的方法

    下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论