Vue CLI的使用(二）Vue-Router(上）

Vue 的路由vue-router

众所周知，前端的三大框架都拥有着自己的路由，
Angular的路由为ngRouter
React的路由为ReactRouter
Vue的路由为VueRouter
vue router是Vue.js官方的路由插件，它和vue.js是深度集成的，使用于构建SPA，它也是基于路由和组件的，路由是用于设定访问路径，将路径和组件映射起来，在SPA当中，页面的路径改变就是组件的改变。

安装路由的方式

一：可以通过命令安装vue-router
命令:npm install vue-router --save
安装好之后，在src目录中创建router文件夹，并在router文件夹下创建index.js文件

在main.js中挂载router

方式二：用VUE CLI创建项目时选择安装路由

配置Vue Router

注意：网页的其他内容，比如在顶部设置标签，会顺序下来执行，这些都是和router-view是同级的，同时组件内容是根据router-view所决定，不一定在下面

运行后的状态为：



由于项目是打开时就能弹出首页，因此我们也可以在路由中设置打开默认网页为首页

一般来说为了美观我们都会采用history模式，只要在vue-router声明当中添加mode: history就行


router-link其他属性的应用
在router-link中我们所使用的属性为to,这是用于指定路径的跳转，也有着其他的属性
tag:可以指定router-link之后渲染成什么组件，比如tag=‘button’就是渲染成一个按钮
replace：replace相当于history中的replaceState,不能通过返回键或前进键到上一个页面或下一个页面
active-class：当router-link对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置的active-class可以修改默认的名称。一般情况下不建议修改

想要修改多个组件的class名称时，我们可以到路由中去修改

使用代码修改路径

我们不仅可以使用router-link来修改路径，同样我们也可以采取使用事件来监听修改路径,下面的push方法也可以改成replace方法

动态路由

在某些情况之下我们无法确定路由的路径，比如我们要进入用户界面，希望的路径如user/zou或user/shou这样的，这是我们需要做:



上面所述的是静态的，但一般的项目都是动态获取数据，因此我们要修改一下


如果想要在user这个组件里面显示出App的数据内容该怎么办呢？

路由的懒加载

在使用命令npm run build之后我们发现代码是进行模块化的，如图：

在一般情况下，所有的vue文件都会被打包在一个js文件之中，这样会造成数据量的庞大，当我们访问一个路由的时候，就会从静态资源服务器当中下载整个js文件，顺序依次为vendor，manifest，app，但是app整个文件太大，容易导致用户电脑下载过程之中页面出现短暂的空白，这是非常不好的，因此我们才会使用懒加载
那么懒加载的主要作用就是将路由对应的组件打包成一个个的js代码快，只有当这个路由被访问到的时候，才会去加载相应的js文件
懒加载的方式主要有三种
一：结合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’)