我们在网上看像网易云音乐这种页面，当我们点击其中的一个类型，它不会跳一整个页面，而是局部跳页面（有点像iframe的感觉）

我点击不同模块，然后仅仅改变了中间展示内容，整个头部不改变（保留）

这是啥？为什么要这么做？

首先，路由是一种映射关系

而vue中的路由便是指路径和组件的映射关系

本质上是为了不同的业务场景切换，但和普通的切页面不一样：

1.它不用刷新一整个页面，用户的体验和感官会更加好；

2.根据需求写组件，根据组件开发

3.数据结构分离，并且可以数据双向绑定

4.单页面路由（仅一个html）

怎么搭载路由

在（package.json看） 1.首先下载vue-router模块

写在（main.js） 2.引入路由

3.注册组件

4.创建路由规则

里面import都是两个相同的效果不同写法

5.路由规则生成路由对象

6.路由注入实例对象

写在（vue） 7.开始搭载

使用vue-router

首先，可以创建一个view文件把不同需求的组件装一起，方便管理

声明式导航

1.router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

2. router-link提供了声明式导航高亮的功能(自带类名)

并且，它还自带两种传参数的方法：

1.如果想传参数，可以在router-link的to属性上写上需要传的参数 to=/path？参数名=参数值在对应组件写入 $route.query.参数名

2.传值第二个方法 to=/path/参数值，main.js里面对应的路由规则的path上要写 :参数名 在对应组件写入 $route.params.参数名

重定向

redirect配置项, 值为要强制切换的路由路径

404页面

先准备好一个用于跳转的404页面，当我访问路径不存在，会自动到404页面

模式改变

history和hash模式

编程式导航

会不会觉得声明式导航太麻烦，有一种用js写法的会更加好懂好写好理解~

我先给按钮添加方法，在method声明

第一个方法 this.$router.push({path:'路由规则路径'，query：'参数'})

页面用$router.query接收

第二个方法 this.$router.push({name:'路由规则定义的name'，query：'参数'})