一、什么是路由
SPA指的是一个 web网站只有唯一的一个 HTML页面，所有组
件的展示与切换都在这唯一的一个页面内完成。
此时，不同组服务器托管网件之间的切换需要通过前端路由来实现。
结论：在 SPA项目中，不同功能之间的切换，要依赖于前端路由来
完成！
二、前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL地址栏中的Hash值发生了变化
③ 前端路由监听了到Hash地址的变化
④ 前端路由把当前 Hash地址对应的组件渲染都浏览器中
结论：前端路由，指的是 Hash地址与组件之间的对应关系！
三、路由的使用
①、使用脚手架创建项目，在创建项目中配置路由
②、生成路由文件，文件中有路由的配置
③、在main.js 中引入路由
④、页面的路由使用
四、路由的两种模式
1.Hash：url中带有#（默认）
主要原理是通过监听#后的URL路径标识符的更改而触发的浏览器hashchange事件，然后通过获取location.hash得到当前的路径标
识符，再进行一些路由跳转的操作。
路由：协议地址端口号锚点
2.History：url中没有#
路由：/XXX/XXX
五服务器托管网、路由的三个基本概念
①、route，它是一条路由，由这个英文单词也可以看出来，它是单数
②、routes是一组路由，把上面的每一条路由组合起来，形成一个数组
③、router是一个机制，相当于一个管理者，它来管理路由
六、路由的传参取参
①、在配置路由时规定传参
routes=[{path:’/about/:id’}]
”/about/参数”>
取参：This.$route.params.id
②、通过？传递参数
routes=[{path:’/about’}]
”/about/xxx=xxx&xxx=xxx”>
取参：this.$route.query.xxx
③、类似get的传参
:to=”{path:’/about’,query:{user:’aaa’}}”
this.$route.query.xxx
④、类似post的传参
:to=”{name:
‘About’,path:’/about’,query:{user:’aaa’}}”
this.$route.query.xxx
地址栏没有数据必须加name
七、路由的动态添加
>返回上一页this.$router.go(-1)
>跳转指定页this.$route.push(‘about’)
八、路由守卫
定义路由时需要添加守卫，也就是要加一些钩子函数。
beforeRouteEnter
beforeRouteLeava
to到哪里去
form从哪里来
next 方法 调用后才能下一步
九、子路由
Constroutes=[
{
Path:’/’,
Name:’Home’,
Component:Home,
Children:[
{Path:’/aaa’,Name:’Aaa’,
Component:Aaa
}
]
}
]
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
