Day17-Vue Router与前端路由管理

什麽是路由?

浏览器透过不同的网址,向後端的网页服务器发送请求 (Request),而服务器接收到浏览器的请求後, 回应对应的内容给浏览器来渲染,这样的机制我们就称为网站路由 (Routing) ,管理网站路由的程序通常会被称作 Router。 —— 重新认识 Vue.js | Kuro Hsu

Vue Router介绍

他的角色有点像是前後端的中继站的感觉,前端的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

下载後的画面

载完後其实画面上已经可以看到预设的样子了,切换时下方内容做更换

Untitled

分析一下他的内容

Untitled

补充

当功能愈多所产生的档案就大,在载入的时候可能就会变很慢,如果能将每个路由切割,让component被使用的时候才去载入,不是一次载入所有,网页载入会变得更有效率,所以在index.js中可以看到两种方式载入方式

  1. 一般
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]
  1. 延迟载入Lazy Loading Routes
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 - 火焰生成

>>:  Day#17 基本功能=直觉的画面

[day7]呼叫永丰API及流程串接整理

今天先来进行呼叫永丰API 串接永丰API 按照范例测试,主要针对建立订单进行实作,查询订单等API...

D27: 工程师太师了: 第14话

工程师太师了: 第14话 杂记: 最近因为铁人赛, 常常必须要读一些资料来写短术, 选出需要的部分整...

day2: 程序码风格的重要性

对於程序码的风格,不管是初学者或是有经验的开发者,当一个专案执行时, 在规划程序码的写法,若没有考虑...

【後转前要多久】# Day10 CSS - CSS常用属性I (文字、背景)

常用CSS属性 color 字体颜色 color: red; color: #AA2; font-s...

[Day24]Funny Encryption Method

上一篇介绍了What's Cryptanalysis? ,这题要我们找出下列几行内,英文字母共出现几...