开始学习Vue（路由）

一、什么是路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组

件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来

完成！

二、前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！
三、路由的使用

①、使用脚手架创建项目，在创建项目中配置路由

②、生成路由文件，文件中有路由的配置

③、在 main.js 中引入路由

④、页面的路由使用

四、路由的两种模式

Hash： url 中带有# （默认）

主要原理是通过监听#后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标

识符，再进行一些路由跳转的操作。

路由：协议地址端口号锚点

History：url 中没有#

路由： /XXX/XXX

五、路由的三个基本概念

①、route，它是一条路由，由这个英文单词也可以看出来，它是单数

②、routes 是一组路由，把上面的每一条路由组合起来，形成一个数组

③、router 是一个机制，相当于一个管理者，它来管理路由

六、路由的传参取参

①、在配置路由时规定传参

routes=[{path: '/about/:id '}]

<router-link to= "/about/参数 ">

取参：This.$route.params.id

②、通过？传递参数

routes=[{path: '/about '}]

<router-link to= "/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 方法调用后才能下一步

九、子路由

Const routes=[

{

Path: '/ ',

Name: 'Home ',

Component:Home,

Children:[

{ Path: '/aaa ', Name: 'Aaa ',

Component:Aaa

}

]

}

]