vue-router 路由详解及在项目中的使用详情及细节
我们要实现单页应用程序，所以我们要学习路由。
1.1. SPA
single-page application，单页应用。一个应用程序只有一个页面。
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内容（通过div切换显示和隐藏，或者是数据的渲染），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。
（php中，单入口程序）
优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。
缺点：不利于seo; 初次加载页面更耗时; 历史管理需要编程实现
传统的网页：地址各不一样
超市
https://pro.m.jd.com/mall/active/2hqsQcyM5bEUVSStkN3BwrBHqVLd/index.html
牛奶
https://pro.m.jd.com/mall/active/3nxcGU8mCsjXN5MjTGQ1AX2LbdfF/index.html
Spa:小米主页
https://m.mi.com/#/product/view?product_id=2172300011
https://m.mi.com/#/product/view?product_id=10000061
1.2. spa的实现
页面只有一个，但是，你要根据用户的地址栏中的信息去展示不同的内容给用户，怎么办？
两种方法：
Ø 动态组件
Ø 路由
1.2.1. 动态组件
动态组件的功能有限（例如，不能传参），我们可以去使用另一种方法--路由。
1.3. vue-router基本使用
它是一个单独的js文件。
先下载，然后在页面中引用。
必须在vue之后引入。
1.3.1. 准备好组件对象
1.3.2. 2.用router-link和router-view准备好视图
1.3.2.1. router-link
router-link最后，会被编译成a标签，如下 ：
to属性用来指定路由 --- 相当于a标签的href属性。它必不可少。
1.3.2.2. router-view
是一个占位符，用来装当前的组件。
1.3.3. 3.实例化 路由对象
let router = new VueRouter({
routes: [ {path:”/”,component:组件1},{path:”/add”,component:组件2}]
})
配置路由。指定路由和组件之间的关系
下图中红色部分是路由
1.3.4. 4.在vue实例中配置router
你要注意，上面的写法是简写方式。相当于：router:router .
如果你前面创建的路由对象不叫router，如下：
则不能简写，必须写全。
1.3.5. 效果如下：
1.4. 嵌套路由
1.4.1. 定义
实际开发中的应用界面，通常由多层嵌套的组件组合而成，如：设置项中还有设置的子项。
1.4.2. 实现
（1）设置视图 。 在子组件中，再次使用router-link和router-view。
（2）修改路由配置。设置相关路由的children项
let router = new VueRouter({
routes: [
{
path:”/setting”,
component:setting,
children:[ {path:”/setting/set1”,component:子组件} ]
},
})
1.4.3. 示例
在前面的案例的基础上，给设置页，下面再加两个子页。
1.4.3.1. 第一步：设置好子组件。
对应的两个template如下：
1.4.3.2. 第二步：修改setting组件的视图
因为 这个两个子组件将会嵌套在setting视图中，所以我们要去修改setting组件的视图：加上router-link 和router-view.
1.4.3.3. 第三步：修改路由配置
1.4.3.4. 效果如下:
如果还有三级的嵌套，做法跟上面是一致的。
1.5. 动态路由-传递参数
例如：商品详情页：
https://m.mi.com/#/product/view?product_id=10000022
https://m.mi.com/#/product/view?product_id=6458
上面两个地址实际上共用一个页面，但由于传递的参数不同，则显示内容也不同。
这种带参数的路由，就是动态路由。
1.5.1. 实现
可以在 vue-router 的路由路径中使用 动态路径参数。
动态路径参数 以冒号开头
{ path: '/detail/:id', component: 组件}
当匹配到一个路由时，参数值会被设置到 this.$route.params.id，可以在每个组件内使用。
1.5.2. 示例 -- 只有一个参数
在上面的基础，再加一个显示商品详情的组件detail，它的功能是根据不同的商品的编号，去加载商品的信息，再显示出来。
1.5.2.1. 创建一个组件对象
它对应的template如下：
1.5.2.2. 修改路由配置
1.5.2.3. 测试路由
1.5.3. 示例 -- 多个参数
只需修改相关的路由规则即可：
如上：表示detail必须要跟两个参数。如下：
/detail/01/abc 这可以匹配成功 。abc的值就是01，xyz的值就是abc
/detail/01 这不能匹配
可以把多个规则对应一个组件：
1.6. 编程式路由-实现页面跳转
对比理解：页面跳转有两种方法
Ø a标签可以设置href之后，实现页面跳转。
Ø 另外，还有一种方法去实现页面跳转：写代码
Window.location = “”
如下：
添加click之后：
document.getElementById("btn").onclick = function() { window.location = "http://www.baidu.com"}
就可以实现点击跳转了。
编程式路由：就像通过用代码设置location一样，去进行页面的跳转。
1.6.1. 格式：
router.push({ path: 'home' })
1.6.2. 示例
点击上面的按钮，直接打开商品编号为100的详情页。
方法f()如下：
注意：这里是$router ，而在获取参数时， this.$route.params.abc
效果如下：
1.7. 重定向配置
重定向：当我们在地址栏中访问一个a网址时，会跳转到b网址。
直接通过路由设置来完成：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
示例：
如下 ：