这是我参与「第五届青训营」伴学笔记创作活动的第 19 天

路由

vue-router

（1）什么是：是vue.js给出的路由几角方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换

（2）vue-router安装和配置步骤

①安装vue-router包——安装：npm i vue-router -S

②创建路由模块

注意：在进行模块化导入的时候，如果给的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件（也就是说，不用写全也可以，它可以默认寻找） router-view 作用：占位符——<router-view></router-view>

router-link:可以代替普通的a链接——,使用它的好处就是，不用写hash地址前面的#，它会自动帮我们加

访问A，没有要展示的组件，那么强制用户跳转到C

路由重定向指的是:用户在访问地址 A 的时候，强制用户跳转到地址C，从而展示特定的组件页面通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向:

通过路由实现组件的嵌套。模板内容中又有自己路由链接，点击子级路由链接显示子级模板内容。

通过children属性声明子路由规则 注意：子路由规则不要用/开头，但是父级路由规则要有/开头

在hash地址中，/后面的参数项叫做路径参数，在路由参数对象中，需要this.$router.params来访问参数路径。

在hash地址中，？后面的参数项叫做查询参数，在路由参数对象中，需要this.$router.query来访问查询参数。

fullPath包含完整的hash地址，包含路径参数和查询参数

声明式导航 ：点击链接实现导航的方式

编程式导航：调用API方法实现导航的方式

$router.go的简化用法

①直接放行：next（）

②强制其跳转：next（‘某个地址’）

③不允许跳转到后台主页，停留在当前页面：next（false）