我们要实现单页应用程序，所以我们要学习路由。

 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/#/index

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' }

  ]

})

 示例：

 

 如下 ：