vue路由（vue-router）的介绍、跳转、传参、懒加载

一、路由的介绍

对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用，
所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。

Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案： vue-router;
建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。

随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用的前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

m;

1. Vue-router的版本对应

   注意：版本号的不同可能会有个别使用方式的不同

    例：
       vue-router@2.x 只适用于 Vue 2.x 版本。
       vue-router@1.x 对应于Vue1.x版本。
   

2. vue-router的安装使用

• CDN连接方式
  link ：https://unpkg.com/vue-router/dist/vue-router.js

• npm 安装

  npm install vue-route
  

二、Vue-router的跳转

1. :to 方式 （声明式导航跳转页面）
   • < router-link :to="{ name: ‘xx’ }" >声明式导航跳转页面< /link-router >
   • < router-link :to="{ path: ‘xx’ }" >声明式导航跳转页面< /link-router >
2. this.$router.push （js编程式导航）
   • this.$router.push(“xx”) //"xx"可以为path路径，也可为name；

三、Vue-router传参

两种方式，query和params。
区别：

（1）params依赖router上定义的占位符。占位符有几个，传参有几个
（2）query传递的参数会在另个页面地址栏上显示。params不显示

1.query

例如：

向另一个页面传递：
	this.$router.push({ name: 'news', query: { id: 123 }})
另一个页面接收：
	this.$route.query.id

2.params

例如：

向另一个页面传递：
	this.$router.push({ name: 'news', params: { id: 123 }})
另一个页面接收：
	this.$route.params.id

四、懒加载

1.Vue-router懒加载

懒加载-----？
也叫延迟加载，即在需要的时候进行加载，随用随载。

为什么需要懒加载？
	像vue这种单页面应用，如果没有应用懒加载，运用webpack打
包后的文件将会异常的大，造成进入首页时，需要加载的内容过多
，时间过长，会先出长时间的白屏，即使做了loading也是不利于
用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载
页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
	简单的说就是：进入首页不用一次加载过多资源造成用时过长！！

懒加载写法：

非懒加载的路由配置：

还有一个小问题：就是用了懒加载后打完包直接运行那个index.html如果报错，报文件引用错误其实是打包时候路径配置有点问题修改下就好了。
找到 webpack.prod.conf.js 文件 添加 publicPath："./",