vue3脚手架简单静态路由解读
作者：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的路由及静态路由和动态路由区别
路由主要分为以下几点：（图见）
静态路由与动态路由的区别
定义
- 静态路由：静态路由是在路由器中设置固定的路由表；除非网络管理员进行干预，否则静 态路由表不会发生变化。
- 动态路由：由网络中的路由器之间相互通信，传递路由信息，利用收到的路由信息更新路由表的路由方式。
使用场景
- 静态路由：网络规模不大，拓扑结构固定的网络中。
- 动态路由：网络规模大，网络拓扑机构复杂的网络。
优点
- 静态路由：简单、高效、可靠、网络安全、转发效率高。
- 动态路由：灵活，能够适时适应网络结构的变化，无需管理员手工维护，减轻了管理员的工作负担。
缺点
- 静态路由：不能灵活的适应网络的动态变化。
- 动态路由：占用网络带宽（用于传输路由更新信息）。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。