1、动态路由（通过$route.params获得数据）

某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb。p除了有前面的/user之外，后面还跟上了用户的ID。这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

1、配置router

2、使用路由

1、用组件传递

2、用函数代码传递

3、创造用户组件并使用传进来的用户信息

在compute中用this.$route.params.userId，但是mustache语法中直接$route.params.userId

参考上面的message就是这样的

2、路由懒加载

1、懒加载的方式

2、懒加载举例

路由懒加载前

路由懒加载后（打包后的js分成了多个部分，懒加载了Home和About其实就是把Home和About分成了另外两个js，当需要的时候才加载。）

参考视频：

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

vue动态路由和路由懒加载相关推荐

Vue组件代码分块和懒加载
前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块懒加载非必要资源文件非必要资源,指的首次渲染出某页面所不必要的资源, ...
vue-1.0-4.0/promis4.3异步请求/父子组件1.0/动态路由3.4/懒加载3.5/导航守卫3.7/-修改文件路径的引用问题......
1--------------------父子组件传递关系子组件:props:{ banners:{type:Array,default(){return[]}}} 父组件: 视口模式 npm in ...
前端学习（2175）：认识路由文件的懒加载
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
vue路由懒加载resolve方式与import方式
使用路由懒加载是为了更好的用户体验,首屏组件加载的速度快一点,解决了白屏的问题懒加载就是延迟加载或者屎按需加载,在需要的时候进行加载常用的懒加载有两种,vue异步组件和es的import 1.未 ...
vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
Vue-Router + Webpack 路由懒加载实现
一.前言 https://segmentfault.com/a/1190000015904599 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分 ...
vue-router 路由的懒加载原理及方式
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...
使用Webpack的代码分离实现Vue懒加载（译文）
当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

vue动态路由和路由懒加载