vue-router 路由 https://router.vuejs.org/zh/
我们要实现单页面应用，所以需要学习路由。
跳转路由的几种方式：
1、声明式：
1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面 </router-link>
2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
:to="" 可以实现绑定动态的 路由 和 参数
2、编程式：
1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
2） this.$router.push({name: 'detail',params:{id: 'abc'}})
备注： params 和 query 传参的区别：
1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变
传统的网页：地址各不一样
超市
https://pro.m.jd.com/mall/active/2hqsQcyM5bEUVSStkN3BwrBHqVLd/index.html
牛奶
https://pro.m.jd.com/mall/active/3nxcGU8mCsjXN5MjTGQ1AX2LbdfF/index.html
单页面应用
http://ustbhuangyi.com/music/#/recommend
spa的实现
页面只有一个，你要根据用户的地址栏中信息去展示不同的内容给用户，怎么办？
SPA single-page-application 单页面应用 一个程序只有一个页面
优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。
缺点：不利于seo，初次加载页面更耗时，历史管理需要编程实现
spa的实现
页面只有一个，但是你要展示不同的内容给用户，怎么办？
两种方法：
1> 动态路由
2> 路由
<component :is=""></component>
- 动态组件的功能有限（例如：不能传参），我们可以使用另外一种方法-路由
使用路由的步骤：
第一步：准备好组件
第二步：router-link和router-view准备好视图
<div style="font-weight:bold">router-link最后会编译成a标签，如下：</div>
- 注：可以为router-link标签默认渲染为a标签，我们可以给它指定tag属性指定最后渲染为什么标签
第三步：实例化 路由对象
配置路由，指定路由和组件之间的关系
第四步：在vue实例中配置router
嵌套路由
在实际开发中的界面，通常有多层嵌套的组件的组合而成，如：设置项下面还有设置的子项
- 实现
1>设置视图 在子组件中再次使用router-link和router-view
2>修改路由配置 设置相关路由的children项
- 实例
第一步：准备好子组件
第二步：设置set的组件视图
因为这两个子组件将会嵌套在set视图中，所以我们需要去修改set组件的视图，：加上router-link和router-view
第三步：修改路由配置
动态路由 - 传递参数
例如：
http://ustbhuangyi.com/music/#/recommend/6689258475
http://ustbhuangyi.com/music/#/recommend/6570024680
上面两个地址实际共用一个页面，但由于传递的参数不同，则显示内容也不同。这种带参数的路由，就是动态路由。
- 实现
可以在vue-router的路由路径中使用动态路径参数
动态路径参数 以冒号开头
{path:'/detail/:id',component:组件}
当匹配到一个路由时，参数值会被设置到this.$route.params.id,可以在每个组件内使用。
- 示例：
在上面的基础上再加一个显示商品详情detail的组件，它的功能是根据不同的商品编号显示不同的商品详情，再显示出来
第一步：创建一个detail组件
第二步：修改路由配置
编程式路由--实现页面跳转
对比理解:页面的跳转有两种方法：
1> a标签可以设置href之后，实现页面跳转
2>另外，还有一种方法去实现页面跳转：写代码
window.location = ''
- 编程式路由：就想通过代码设置localtion一样，去进行页面跳转
router.push({path:'index'})
点击上方按钮，直接打开商品编号为100的详情页
注：这里的参数是route.params.num
| 声明式 | 编程式 |
|---|---|
| <router-link to="/news"></router-link> | router.push |
this.$router.replace()，不会像history栈里添加新的记录
| 声明式 | 编程式 |
|---|---|
| <router-link to="/news" replace></router-link> | router.replace |
this.$router.go(-1) 向前一步
可以通过this.route访问当前的路由
this.$router.push('/index') //字符串路径 this.$router.push('index')
this.$router.push({path:'/index'}) //对象
this.$router.push({name:'index'}) //对象 name
this.$router.push({name:'index',params:{num:100}) //通过this.$route.params.num获取
this.$router.push({name:'index',query:{num:100}) //通过this.$route.query.num 获取
命名视图
重定向：当我们再地址栏中访问一个a网址时，会跳转到b网址
直接通过路由设置来完成
