vue-router理解及使用(基于vue2.x)--01

一.vue-router理解及使用

为什么会有前端路由？
1.在我们最开始开发的时候，可能前后端是一体化的，需要我们后端人员使用jsp模板引擎渲染出我们的页面，直接返回给浏览器。
2. 到了后期，又前端人员，编写html+js+css，客户通过浏览器请求这些静态文件，访问数据时，可以使用ajax等技术，向后端请求数据，再通过js动态的把数据插入到html中，这样也不太好，每个页面我们都要对应的写一套html+css+js。
3.现在我们通过vue框架，也可以动态的显示数据了，因为vue存在了一个核心，叫做组件化，而且我们使用webpack打包时，会把所有的文件打包成一个或多个文件，客户访问时，可以直接下载这些静态文件就可以了，那么我们是不是可以这么做，客户一开始访问，就把所有的静态文件下载到浏览器，然后当客户切换页面时，不用发送请求再次下载资源，形成页面的切换呢？
我们就可以使用vue-router来实现，现在我们打包之后，会把我们编写的资源打包成一个包，客户访问，直接把这个包下载到浏览器，当客户切换页面，浏览器路径会变，但是不会再请求静态资源服务器，而是通过我们配置的前端路由，找到对应的组件，把组件显示给用户，这就是前端路由。

以上废话过多，简单来说，vue-router就是解决：客户一开始加载下来所有的静态资源，每次切换页面，都不从新加载静态资源，而是通过路由的形式，找到对应的组件，显示给用户。这样大大减少了服务器的压力！这种其实也就是spa应用（单页面富应用），只有一个html，切换页面，只需要切换对应的组件即可。

二.url的hash和html5的history

我们知道了前端路由的实现方式其实就是：改变路径内容，而不改变整体内容的刷新。
有两种实现方式：
1.使用url的hash
本质上使用的是window.location的href属性实现的
使用方式：location.hash=‘xxx’

2.使用html5的history对象（历史记录）
history.pushState({},’’,‘路径’)：向栈压进一个
history,replaceState({},’’,‘路径’)：浏览器不能前进后退
history.back():去除栈顶端一个
history.go():里面参数为数字，整数前进，负数后退
history.forward();前进一个历史记录

以上两种方式都可以实现，但是hash的路径上会有一个#，而且vue-router默认使用这种方式

三.如何使用vue-router

1. 创建项目（使用vue cli创建项目，创建项目时，选择2.x版本）

2. 安装vue-router（可以创建项目的时候，直接添加依赖）

1,使用命令行：
npm install vue-router --save
2.使用vue ui的方式：

3. 在模块化使用vue-router，并配置规则

因为vue-router是一个依赖，所以要使用Vue.use()来安装到项目中
注意：使用Vue ui的方式添加的vue-router是没有router这个目录的，我们需要自己创建一个这个目录，并且创建一个index.js的文件，vue-router会自动执行这个index.js。

4.导入vue-router

需要在main.js中导入并挂载vue-router才能使用路由

5.使用vue-router

上边的步骤，只是默认的配置了vue-router，还没有真正的使用
使用步骤：
1.创建路由组件（就是对应的路由，加载那个页面）

这里我们创建了两个路由组件，并对应导出了

2.配置路由规则
在我们刚才配置的index.js中，可以配置我们的路由映射规则
路由的而规则是成对出现的

3.使用路由
配置好以上步骤之后，我们就可以使用我们的路由了：

使用路由时，有两个标签：
router-link:标注了这个标签使用路由，默认页面显示的是a标签，to属性就是代表的路由，这里要和我们在index中配置的path映射。
router-view：我们使用路由找到对应的路由组件，路由组件的内容就会在这个里面显示

最终效果：

四.怎么在我们输入http://8080时，直接显示首页内容

可以在index的映射规则里面，配置如下：

{
        //当监听到路由的路径为 空或者'/'，重定向到home的路由上   效果：用户进入页面，没有跳转路径，也会显示home页
        path : '',
        redirect : '/home'
    }

这时，我们路径上没有任何路由时，默认找这个映射规则，通过redirect重定向到/home的路由映射规则上，就能在我们进入系统时，默认显示首页

五.修改默认的跳转规则

vue-router使用的是hash跳转规则，但是这个规则在我们跳转路由时，路径上会有一个#

我们可以修改配置，变为history模式，即可解决：

//创建vue-router对象
const router = new VueRoute({
    //路由的映射规则   routes = routes
    routes,
    //vue-router的默认跳转规则为hash，但是路径带有#，这里使用history方式，替代hash，路径不会有#
    mode : 'history',
})

效果：

六.router-link标签的其他属性

1.tag=xxx：默认router-link显示为一个a标签，可以通过tag这个属性，变为我们想要的样子，xxx就代表标签名
2.replace：replace修饰之后，页面跳转路由后，不可以前进后退（历史记录）
3.active-class=xxx：router-link默认生成a标签后，通过路由跳转成功后的这个标签上，会默认生成一个router-link-active的class，我们可以通过active-class=xxx改变这个class的名字。

还可以同过在index中配置，让默认的class名称改变：linkActiveClass

const router = new VueRoute({
    //路由的映射规则   routes = routes
    routes,
    //vue-router的默认跳转规则为hash，但是路径带有#，这里使用history方式，替代hash，路径不会有#
    mode : 'history',
    linkActiveClass: 'haha'
})

七.通过事件来跳转路由

可能有的时候，我们想要在跳转路由的时候，写一些js代码，我们就可以使用一下方式跳转路由

八.动态路由

我们可能在项目中不只有这种的路径，可能会有：/user/xxx这种的路由，例如：/user/123 /user/234 ，前边的/user固定，后边的123、234则是不固定的，我们称为动态路由

1.创建一个我的路由，跳转路径为：/user/123
2.配置路由规则

3.路由组件User
效果：

这样可以实现跳转，但是意义不大，我们最主要还是想要接收这个id，我们可以通过：
this.$route.params.xxx:这里的xxx就是上边的/user/:id这里面的id
这样就可以接收id的值了。

还可以简写为：
{{$route.params.xxx}}直接显示
还需要注意：路由规则写的是什么就要匹配什么，例如：/user/:id不能传递路由是写成/user，这样就不符合路由规则，跳转不了。

九.路由的懒加载

上述的方式编写路由规则，是我们先导入路由组件，然后再匹配路由规则的，这种方式其实是把所有我们编写的js，打包到了一个js文件中

当我们以后编写的js量过大时，客户第一次加载，需要把js下载到浏览器，那么由于js量庞大，就会造成首次访问，长时间显示成空白页，对客户的体验很不好
解决方案：使用vue-router的路由懒加载模式，使用之后，标注了懒加载的js，就不会打包到一个js里面，而是分开打包，当客户第一次加载的时候，就不会加载这些js文件，而是等到用到的时候，再加载。

懒加载的方式：

十.嵌套路由

什么是嵌套路由：
在我们使用网站时，可能首页会有一些其他的按钮，点击之后，会在首页内显示内容，这是我们的路由就可能写为：/home/news这样的，这就是嵌套路由

使用：
1.创建两个home下的子组件

2.再home中编写路由

3.编写index路由规则：

4.效果：

也可以添加默认路由，跳转进home页，就显示那个路由内容：

以上就是本人对router的一部分的初步理解，写的比较乱，练习到哪里总结到哪里。