一、router简介
在后端程序中，我们是使用的servlet或者springMVC来匹配前端的http请求，并响应相关的数据发送给前端。
在前端程序中，一个单应用程序，通过一个hash（#号）改变来切换页面的展示。
http://localhost:63342/mywebpack/index.html#/login
http://localhost:63342/mywebpack/index.html#/register
前端路由的优点在于，我们只是展示页面可以不需要通过http来请求后端响应，这样一定程度上减轻了服务器的压力，也减少了网络的请求。
关于#号的一些小常识：#号是用来指导浏览器动作的，#号后的字符是不会发送给服务端，同时也不会触发网页的重载，在通常使用的浏览器中#改变增加浏览器的访问历史，因此可以使用浏览器的后退，如果要将#号发送给服务端，需要转义为“#”。
二、vue-router的基本使用1.路由安装第一种是在html中引入<script src="vue-router.js">，由于vue-router依赖于vue，因此vue.js是必须要引入的并注意引入顺序，同时这种方式会自动安装路由并使用；
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js"></script>
第二种是使用webpack构建工具来引入，cnpm i vue-router -D ，引入后需要手动来安装
cnpm i vue-router -D
import Vue from 'vue'
import VueRouter from 'vue-router'
//手动安装路由
Vue.use(VueRouter)
//定义两个路由组件
var login = {
template:"<h2>登录组件</h2>"
}
var register = {
template:"<h2>注册组件</h2>"
}
new VueRouter()构造器来构建一个路由对象，其中routes匹配路由规则，path 请求路由，component 所要展示的组件，
特别强调路由匹配规则的英文routes不要写错，不是router
var myRouter = new VueRouter({
//routes建立路由的匹配规则，注意单词
routes:[
{ path:'/login',component:login },
{ path:'/register',component:register},
]
})
new Vue({
el:'#app',
//路由注册到vm实例
router : myRouter
})
<!--vue-router提供的路由寻址-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!--路由展示占位符-->
<router-view></router-view>
<router-view>是路由展示占位符，所展示的内容是由路由的匹配规则来进行展示的。
6.路由的重定向
//匹配规则
routes: [
{ path:"/login",component:login },
//根路径重定向至login组件
{ path:"/",redirect:'/login'},
{ path:"/register/:id/:name",component:register },
],
a.通过浏览器开发工具中的元素观察可知，当超链接改变时，在超链接中出现class="router-link-exact-active router-link-active" ，因此我们可以直接使用router-link-active来改变其样式
.router-link-active{
color:red;
}
b.另外还有一种方法，自定义一个样式，通过在new VueRouter()的构造函数中，指定其linkActiveClass为这个自定义样式
.myActive{
color:red
}
var router = new VueRouter({
//使用自定义样式高亮显示其链接
linkActiveClass:'myActive',
})
通过在url中传递对象参数{id:10,name:zs}
<router-link to="/login?id=10&name=zs">登录</router-link>
通过this.$route.query.id或者使用插值{{$route.query.id}}可以获取其中id值，同理name
9.路由传参：使用params方式传递参数此方式符合restful规范，另外需要在匹配规则中指定其参数名
<router-link to="/register/20/ls">注册</router-link>
//路由对象的创建
var firstroute = new VueRouter({
//匹配规则
routes: [
{ path:"/login",component:login },
{ path:"/",redirect:'/login'},
//params方式需要在路由匹配规则中指定其参数名
{ path:"/register/:id/:name",component:register },
],
})
通过this.$route.params.id或者使用插值{{$route.params.id}}可以获取其中id值，同理name
10.嵌套路由一个路由匹配规则中，展示的组件默认只能在当前组件中的<router-view>，如果需要将组件展示在当前展示的组件中（即组件展示在<router-view>中所展示组件的<router-view>，即嵌套展示），使用嵌套路由。
例：有三个组件，main,login,register，将login,register展示在main这个组件中，同时main展示在根组件中。
<div id="app">
<router-link to="/main">main</router-link>
<!--根组件展示占位符-->
<router-view></router-view>
</div>
<!--main组件模板，其中展示login和register子组件-->
<template id="tempmain">
<div>
<h2>这是main组件</h2>
<router-link to="/main/login">登录</router-link>
<router-link to="/main/register">注册</router-link>
<!--子组件展示占位符-->
<router-view></router-view>
</div>
</template>
//定义三个路由组件
var main = {
template:"#tempmain",
}
var login = {
template:"<h2>登录组件</h2>",
}
var register = {
template:"<h2>注册组件</h2>",
}
//路由对象的创建
var router = new VueRouter({
//匹配规则
routes: [
{ path:"/main",component:main,
// children嵌套路由，其中path中不能加/
// 否则会直接请求/login，而不是/main/login
children:[
{path:"login",component:login},
{path:"register",component:register},
]},
],
linkActiveClass:'myActive',
})
//路由对象的注册
new Vue({
el:"#app",
//路由注册，也可以直接使用 router
router:router,
})
