动态路由,懒加载,嵌套路由,路由传参

一 .动态路由

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

demo步骤

1.

2.

3.

二 .懒加载

先看一下不用懒加载的话,项目打包后的JS结构,所有的业务代码都放在了一个js里

当打包构建应用时，Javascript 包会变得非常大，影响页面加载甚至用户的电脑上还出现了短暂空白的情况。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件

使用懒加载的方式对比以及打包后的效果对比

Vue router懒加载的方式有三种

方式一: 结合Vue的异步组件和Webpack的代码分析. const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD写法 const About = resolve => require(['../components/About.vue'], resolve); 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割. const Home = () => import('../components/Home.vue')

• 对于ES6中代码懒加载方式有两种写法 写法一:导入和映射分离写法

写法二:导入和映射合并写法

三 嵌套路由

嵌套路由是一个很常见的功能 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容. 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

嵌套路由配置方式

四. 路由传参

传递参数主要有两种类型: params和query

• params的类型:
  • 配置路由格式: { path: '/user/:userid',component: ()=> import('../components/user') }
  • 路由连接上在to组件后跟上对应的值<router-link：to="/user/'+userId">用户</router-link>
  • 传递后在URL形成的路径: /router/123, /router/abc
  • 我们也可以直接取值在本组件用:{{$route.params.userid}}
• query的类型:
  • 配置路由格式: /router, 也就是普通配置
  • 传递的方式: 对象中使用query的key作为传递方式
  • 传递后形成的路径: /router?id=123, /router?id=abc<router-link>方式,直接在router-link里写

  

  JavaScript

使用它们也有两种方式: <router-link>的方式和JavaScript代码方式

<router-link>方式

JavaScript代码方式

$route和$router是有区别的

router为VueRouter实例，想要导航到不同URL，则使用router.push方法