我们要实现单页应用程序，所以我们要学习路由。
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/#/index
https://m.mi.com/#/product/view?product_id=2172300011
https://m.mi.com/#/product/view?product_id=10000061
页面只有一个，但是，你要根据用户的地址栏中的信息去展示不同的内容给用户，怎么办？
两种方法：
Ø 动态组件
Ø 路由
动态组件的功能有限（例如，不能传参），我们可以去使用另一种方法–路由。
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.query传参： 1.query传参 路由：
var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 path ] })导航：
<router-link to="/login?id=10&name=zs">登录</router-link> <router-link :to={path:'register',query:{id:5,name:'lili'}}>注册</router-link>等同于：
router.push(‘/login?id=10&name=zs’) router.push({path:'register',query:{id:5,name:'lili'}})**注意：**在 Vue 实例内部，你可以通过 r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 t h i s . router 访问路由实例。因此你可以调用 this. router访问路由实例。因此你可以调用this.router.push。 this.KaTeX parse error: Expected 'EOF', got '&' at position 26: …h(‘/login?id=10&̲name=zs’) this…router.push({path:‘register’,query:{id:5,name:‘lili’}}) 1 2 3 4 5 6 7 8 9 10 注意：jquery可以通过name或path来引入路由
2.params传参 2.params传参 路由：
var router = new VueRouter({ routes: [ { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id） 刷新页面 参数会消失 { name:'register', path: '/register', component: register } ] })导航：
<router-link to="/login/12/ls">登录</router-link> <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>1 2 注意：params只能通过name来引入路由，path会undefined
jquery传参和params传参的区别 1.用法上: 1.上文已经提到query可以用name或path来引入 2.params必需要用name来引入，接收参数都是类似的，分别是this.route.query.name和this. route.query.name和this.route.query.name和this.route.params.name。
2.地址栏表现形式上: query：
params：（注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失）
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()如下：
注意：这里是 r o u t e r ， 而 在 获 取 参 数 时 ， t h i s . router ，而在获取参数时， this. router，而在获取参数时，this.route.params.abc
效果如下：
1.7. 重定向配置
重定向：当我们在地址栏中访问一个a网址时，会跳转到b网址。
直接通过路由设置来完成：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })示例：
如下 ：
