学习VueRouter

前言

Vue官方提供了一个vue-router作为跳转链接组件之间，为何不能使用a标签实现组件跳转链接，以及vue-router怎么使用，怎么实现传参，有哪些需要注意的地方，本篇将开启vue-router的介绍。

vue-router是什么

vue-router是路由，这里的路由是SPA(单页面全称：single page application)路径管理器。

vue-router是Vue.js官方路由插件，它和Vue.js是深度集成的，用于构建单页面应用。Vue单页面应用是基于路由和组件，路由设定为访问路径，并将路径和组件映射起来。在传统的页面应用中，使用一些超链接实现页面切换跳转；而vue-router单页面应用中，是路径间的切换，也就是组件间的切换。路由模块本质，是建立url和页面之间的映射关系。

为何不能使用a标签。

Vue都是单页面应用，在项目打包时，运行npm build就会生成一个dist文件夹，这里面只有静态资源和一个index.html页面，因此必须使用vue-router实现页面跳转。

vue-router实现原理

SPA单页面应用，只有一个完整页面；页面在加载时，不会加载整个页面，只是更新某个指定容器里的内容。vue-router实现单页面应用路由，提供两个方式：history模式与hash模式，根据参数mode区分使用哪一种方式。SPA核心是更新视图，不重新请求页面。

history模式

配置：

const router = new VueRouter({
  mode: 'history',
  routes: [ 
    // ... 
  ]
 })

只需要在路由配置项中添加参数mode设置成history即可。

这种模式和传统url路由看起来没有任何区别，比如：(http://xxx.com/course/courseId)。
需要注意的是：需要后端配合，使用正确的配置；否则，访问会返回404。大部分情况设置成：如果url输入错误或者匹配不到任何静态资源，就自动跳转到首页。

histroy模式采用H5 history interface新增的pushState()方法与replaceState()方法；

这两种方法应用于浏览器记录栈，当前浏览器已有的back/forward/go功能基础上，它们提供了对历史记录修改功能。当它们执行修改时，改变当前url，浏览器不会立即向后端发送请求。

hash模式

配置：


const router = new VueRouter({
  mode: 'hash',
  routes: [
    // ...
  ]
})

只需要在路由配置项中添加参数mode设置成hash即可。

这种模式和传统url路由看起来有区别，会在url后天添加“ # ”符号后跟一串hash值，
比如：http://xxx.com/course/courseId#hash值。

vue-router默认设置成hash模式。使用url的hash模拟一个完整的url，当url发生变化时，页面不会重新加载。“ # ”是页面中的一个位置，是一个锚点；改变后面的hash值，浏览器只会滚动到相应位置，不会重新加载页面。也就是说hash出现在url中，不会被包含在http请求中，对后端完全没有影响，改变url不会重新加载页面。

每一次改变hash值，都会在浏览器的访问历史中增加一条记录，点击返回按钮，就能回到上一个位置；hash模式是通过不同的锚点值，渲染指定DOM位置的不同数据。hash模式的原理使用onhashchange事件监听hash值的变化，可以在window对象上监听这个事件。

vue-router使用

使用Vue官网提供的vue-cli脚手架。

在src目录下创建一个router文件夹，在该文件夹下创建一个index.js存放路由。

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
const TeacherCourseList = ()=>import('@/teacher/course.list')
const TeacherInfo = ()=>import('@/teacher/info')
Vue.use(VueRouter) // 使用use方法注册使用路由
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
       path: '/teacher/courselist',
       component: TeacherCourseList,
       // 如果该路由下有 -> 子路由
       // 在该路由下添加children 进行路由嵌套
       children: [
         {
           path: '/teacher/info',
           component: TeacherInfo
         }
       ]
    }
  ]
})
export default router

引入router，注册路由到整个应用都有路由功能。

// app.js
import router from '@/router'
new Vue({
  // ...
  router // 相当于：router: router，vue官方默认router简写，
        // 如果定义别名 使用router: 路由别名
}).$mount('#app');

模版中使用

<template>
  <div id="app">
    <router-link to="/teacher/courselist"> router </router-link>
    <router-view></router-view>
  </div>
</template>

router-view表示路由匹配到的组件在该地方展示。

vue-router样式选中：

在配置项中添加linkActiveClass选项。

// ...
new VueRouter({
  linkActiveClass: 'curr', // 可以自定义class
  // ...
})

在router-link中写入active-class。

1	<router-link class="active-class" to="/teacher/courselist"> router </router-link>

这样书写会出现一个问题，只要以to开头的都会激活选中样式。

比如：

1 2	<router-link to="/" class="active-class"> router </router-link> <router-link to="/a" class="active-class"> router </router-link>

可以使用exact属性精确匹配模式解决。

1	<router-link to="/" class="active-class" exact> router <router-link>

表示这个链接只会在地址为 / 时被激活。

路由重定向

也是通过routes配置完成；重定向的目标可以是一个命名的路由；可以是一个方法，动态返回重定向目标。

new VueRouter({
  routes: [
    {
      path: '/teacher/courselist',
      redirect: '/courselist'
    },
    {
      path: '/teacher/courselist',
      redirect: {
        name: 'TeacherCourseList'
      }
    },
    {
      path: '/teacher/courselist',
      redirect: to => {
         // 方法接收 目标路由 作为参数
         // return 重定向的字符串路径/路径对象
         return '/teacher/courselist';
      }
    }
  ]
})

路由传参

使用to

// 定义
routes: [
  {
    name: 'teacherPCCourseList',
    path: '/teacher/courselist/:courseId/teacherId',
    component: TeacherCourseList
  }
]

可以给路由取个name属性名字，代表当前路由；:courseId表示动态参数，teacherId表示静态参数

页面传参

1
2
3

this.$router.push({
    path: `/teacher/courselist/${courseId}/01`
})

获取参数

1
2
3

{{ this.$route.params.courseId }} 
-- 
{{ this.$route.params.teacherId }}

特点：参数拼接在后面，丑陋；而且暴露信息。

使用params

// 定义
routes: [
  {
    name: 'TeacherPCCourseList',
    path: '/teacher/courselist',
    component: TeacherCourseList
  }
]

页面传参

this.$router.push({
    name: 'TeacherPCCourseList',
    params: {
      courseId: courseId 
    }
  })

获取参数

1	{{ this.$route.params.courseId }}

特点：页面刷新后面参数会丢失。

使用query

// 定义
routes: [
  {
    name: 'TeacherPCCourseList',
    path: '/teacher/courselist',
    query: { 
      courseId: courseId
    }
  }
]

页面传参


this.$router.push({
    name: 'TeacherPCCourseList',
    query: {
      courseId: courseId
    }
  })

获取参数

1	{{ this.$route.query.courseId }}

特点：不会在后面拼接参数，页面刷新参数不会丢失。

$route与$router

$route是路由信息对象，包括：path，name，params，query，hash等。

$route.path：表示当前路由的路径，解析为绝对路径；如：/list。

$route.name：表示当前路径名称。

$route.params：表示当前路由参数，是一个key/value对象，包含动态参数和静态参数；没有查询到是一个空对象。

$route.query：表示当前路由参数，是一个key/value对象，包含动态参数和静态参数；没有查询到是一个空对象。

$route.hash：表示当前路由的hash值；没有hash值，是个空字符串。

$router是路由实例对象，使用new VueRouter创建的实例，包括：路由跳转方法，钩子函数等。

常见的路由跳转方式：

$router.go(-1)；表示跳转到上一次浏览的页面。

$router.replace(‘/teacher/couselist’)；表示跳转该指定地址。

$router.replace({name:’TeacherPCCourseList’ })；使用name属性跳转该指定地址。

$router.push(‘/teacher/courselist’)；表示跳转该指定地址。

$router.push({ name: ‘TeacherPCCourseList’ })；使用name属性进行跳转该指定地址。

$router.replace与$router.push区别：

使用replace方法不会向浏览器history栈添加新记录，而是替换当前history栈中的记录；当replace跳转到页面后，使用浏览器后退按钮不能查看之前的页面。

使用push方法会向浏览器history栈添加新记录，使用浏览器后退按钮能查看之前的页面。