路由代码跳转
我们知道，路由的跳转可以通过路由跳转方式一
有时候，页面的跳转可能需要执行对应的JavaScript代码，这个时候就需要我们使用第二种跳转方式了
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，我们希望是以下的路径：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
- /user/aaaa或者/user/bbbbbb
- 除了前面的/user之外。后面还跟上了用户的ID
- 这个path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式）
- 具体实现如下：
- 我们得先创建一个对应的组件：
- 导入组件，将导入的组件配置成一一的映射关系
- 中进行配置
- 如下：
- 显示效果为：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
路由的懒加载
- 官方解释为：包构建应用时，JavaScript包会变得非常大，影响页面的加载
- 当然，如果我们能够把不同的对应的组件分割为不同的板块，然后当路径访问的时候才加载对应组件，主要就会比较高效
- 首先，我们知道路由中通常会定义很多的页面，H这些页面，一般情况下，是放在一个js文件中，但是，如果很多页面同时放到js文件中，必然会造成这个页面非常的大，如果我们一次性从服务器请求下来这个页面，可能需要花费一些是啊金，设置用户的电脑会出现空白的现象。如果想避免这种情况，使用懒加载就可以了。
懒加载的作用
是将路由对应的组件打包为一个个Js代码，只有在这个路由被访问的时候，才加载对应的处组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
懒加载的方式
- 1.结合Vue的异步组件和webpack的代码分析
constHome= resolve =>{ require.ensure(['../components/'],()=>{resolve(require('../components/'))})};constAbout= resolve=>required(['../components/'],resolve);- 3.在ES6中，我们可以有更加简单的方式来组织Vue的异步组件和Webpack的代码分割
const Home = () => import('../components/')
路由嵌套
实现步骤
<template><div class="home"><!--<img alt="Vue logo" src="../assets/">--><!--<HelloWorld msg="Welcome to Your Vue.js App"/>--><h2>我是首页</h2><p>我是首页内容，，，，，</p><router-link to="/home/news">新闻 </router-link><router-link to="/home/message">消息</router-link><router-view/></div>vue-router参数传递
传递参数主要有以下两种方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
params的类型
- 配置路由格式：
/router/:id - 传递的方式在path后面跟上对应的值
- 传递后形成的路径：
/router/aaa,/router/abc
query的类型
- 配置路由格式：
/router,也就是普通配置 - 传递的方式：对象中使用query的key作为传递方式
- 传递后形成的路径：
/router？id=aaa./router?id=abc
具体实现为：
<router-link :to="{path:'/profile',query:{name:'yiya',height:'189',age:'19'}}">档案</router-link>实现效果：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html
总结
vue-router的知识比较多，也比较复杂，但是只要多点耐心，反复练习，掌握了原理和步骤，其实也就不复杂了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18589.html