vue第十四单元(认识单页面应用，理解vue-router的基本用法)

第十四单元(认识单页面应用，理解vue-router的基本用法)

#课程目标

1、了解单页应用与多页应用以及各自的优缺点

2、掌握路由如何实现单页应用

3、精通路由的基本语法

#知识点

#一、单页应用与多页应用

1、多页应用（MPA）

传统的应用形式，即每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

2、单页应用（SPA）

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

3、有这些缺点，为什么还要使用Vue呢？

Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术(我是SSR)，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

#二、vue-router如何实现单页应用

vue-router可以使用两种方式实现更新视图而不重新请求页面，通过设置mode为hash或history来实现。

1、hash模式

hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

2、history模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

#三、vue-router的使用

1、官网地址：https://router.vuejs.org/zh/

vue-router的功能：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

2、配置路由

npm install vue-router
//1、在main.js中引入路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //必须use
//2、创建路由实例router
// 2.1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2.2 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
//2.3 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
//3、将router实例挂载到vue实例上
new Vue({
    ...
    router
})
一旦注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

 

3、在组件中使用

vue-router中提供两个标签

其中

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
//css部分
.router-link-active {
  color: red;
}

 

效果如下图：

四、路由的其它知识

1、路由器对象和当前路由

​ 当讲路由实例挂载到vue实例上后，通过this.$router可访问路由器对象，通过this.$route可访问当前路由。

​ 在vue实例中通过打印this来观察一下：

2、动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。比如：我们需要将不同的产品详情内容展示到同一个组件中，这时候可以使用匹配id的方式。

{
// 动态路径参数 以冒号开头
   path:'/detail/:id',
   component:Detail
 }

 

此时 /detail/1,/detail/2 都将映射到Detail组件视图中，可以通过this.$route.params.id 获取动态路由参数

3、命名路由

routes: [
    {
      path: '/user/:userId',
      name: 'user', //给路由起个名字
      component: User
    }
  ]
//通过名字访问路由
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

 

4、命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view> //默认为default
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

 

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

 

5、重定向

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' }  //将/重定向到/home
  ]
})

 

6、路由模式

const router = new VueRouter({
  mode: 'history', //hash模式有#，history模式没有#但需要后端配合
  routes: [...]
})

7、编程式的导航

router.push(location, onComplete?, onAbort?)

点击 <router-link :to="..."> 等同于调用 router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

 

注意：path与params不能同时出现，而且params配置的参数刷新页面时会丢失

#授课思路

#案例作业

1、参考美团app，熟练配置路由，掌握路由传参等基本技能。