浏览器透过不同的网址,向後端的网页服务器发送请求 (Request),而服务器接收到浏览器的请求後, 回应对应的内容给浏览器来渲染,这样的机制我们就称为网站路由 (Routing) ,管理网站路由的程序通常会被称作 Router。 —— 重新认识 Vue.js | Kuro Hsu
他的角色有点像是前後端的中继站的感觉,前端的request直接到中继站,中继站直接返还相对应资料,request在中继站就会被处理。
新建立的专案可以直接新增router选项
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
>(*) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
若是已建立的就直接到专案目录下执行
vue add router@next
安装後会问要不要采history mode
(采HTML5的history API来管理前端路由),这边先选Y
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
安装就完成了!! src/
下也会多了router
资料夹
✔ Successfully invoked generator for plugin: @vue/cli-plugin-router
载完後其实画面上已经可以看到预设的样子了,切换时下方内容做更换
分析一下他的内容
补充
当功能愈多所产生的档案就大,在载入的时候可能就会变很慢,如果能将每个路由切割,让component被使用的时候才去载入,不是一次载入所有,网页载入会变得更有效率,所以在index.js中可以看到两种方式载入方式
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
/* webpackChunkName: "about" */
在build
後可以看到会用命名的字输出about.c4e4d8bf.js
File Size Gzipped
dist\js\chunk-vendors.350d8a84.js 113.38 KiB 41.93 KiB
dist\js\app.ffdde7a6.js 5.98 KiB 2.26 KiB
dist\js\about.c4e4d8bf.js 0.35 KiB 0.27 KiB
dist\css\app.b229284b.css 0.42 KiB 0.26 KiB
Vue.js App效能优化: part2 – Lazy loading路由及第三方库打包反向模式(anti-pattern)
https://sdyou.wordpress.com/2019/03/11/译效能优化part2-lazy-loading路由及第三方库打包反向模式anti-pattern/
Vue Router Lazy Loading
https://blog.puckwang.com/post/2019/vue_router_lazy_loading/
<<: Day 18 | FPS灭火AR游戏开发Part3 - 火焰生成
MVC架构 MVC是软件工程中的一种软件架构模式,是基於关注点分离(seperation of co...
在制作专案时,大多都是与他人共同协作,当一起开发的人越来越多时,就更需要有一套规则或模式来进行合作,...
嗨大家~ 昨天有没有试着用 Creator 建立专案呢! 没有的话现在赶快去复习哦, 因为我们今天...
tags: ItIron2021 Javascript 前言 前两天我们把重点放在by refere...
不知道为甚麽,旁边无缘无故多了一条空白区域,但那个区域根本没有其他元件 程序码好像也不知道该贴哪段,...