vue-router总结 -- 基础使用

李俊

前端开发工程师

结构.png

一、简单介绍
Vue Router是vuejs官方的路由管理器，是学习vue的必备技能，利用vue-router，可以轻松构建单页应用。本文所有内容，均是自我总结，如有错误敬请指正。

二、基本使用
1.开始
(1)安装vue-router包

npm install --save vue-router

(2)定义路由
创建route.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home'
import Hello from './Hello'
Vue.use(Router)
export default new Router({
  routes: [
      path: '/', // 访问的路径
      name: 'Home',
      component: Home // 视图对应的组件
      path: 'hello',
      name: 'Hello',
      component: Hello

(3)注册
在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

此时，启动项目访问根路径，既能打开Home组件内容。

2.两种使用方式
（1）声明式导航

<router-link to="/hello">打开Hello</router-link>

<router-link>组件默认会在页面生成一个a标签，点击会跳转到to属性对应的地址。也可以写成如下形式：

<router-link :to="path">打开Hello</router-link>
<router-link :to="{path: '/hello'}">打开Hello</router-link>
<router-link :to="{name: 'Hello'}">打开Hello</router-link>

<router-link>所有属性及说明

属性说明

to(必须) 目标路由地址。

replace 替换当前路由，在历史记录栈中，用当前路由地址替换上一个路由地址。

append 目标路由地址为相对路径时有效，添加该属性，则在当前路径前添加基路径。

tag 默认值："a"，router-link组件渲染在页面上的标签名称。

active-class 默认值："router-link-activve"，链接激活时使用的css类名。

exact 精确匹配router-link是否为激活状态，不添加时，例如：访问'a/b/c'时，'a','a/b'对应的router-link也为激活状态，添加exact属性后，'a','a/b'则不会激活。

exact-active-class 默认值：'router-link-exact-active'，router-link处于激活状态时的class类名。

event 默认值：'click'，声明触发导航的事件

(2)编程式导航
路由跳转还可以通过router的实例方法实现，常用的方法有 push() , replace() , go() ，使用如下：

router.push('/hello')
router.push({name: 'Hello'})
router.push({path: '/hello'})
router.replace('/hello')
router.replace({name: 'Hello'})
router.replace({path: '/hello'})
router.go(1) // 前进一步
router.go(-1) // 后退一步

push() 和 replace() 使用方法基本一致，唯一区别在于push()是往历史记录栈后插入一条新的记录，而replace()是替换当前记录，不会改变历史记录栈长度。使用 go() 方法时，如果传入的参数，超出当前历史记录栈范围，则不会发生跳转。
需要注意的是，在使用 router.push({path: '', params: {}}) 形式时，参数将无法传递，params会被忽略，具体传参方式，在后面的路由传参部分会详细介绍。

3.嵌套路由
当页面变得相对复杂，出现了多级视图组件嵌套时，会使用到嵌套路由，也就是在<router-view>中包含<router-view>。
router.js

routes: [{
    path: '/',
    name: 'Home',
    component: Home,
    children: [{
        path: '/about',
        name: 'About',
        component: About,
    path: '/about/a',
    name: 'a',
    component: a

App.vue

<template>
  <div id="app">
    <router-view/>
</template>

Home.vue

<template>
    <div class="">
        <div>home</div>
        <router-view></router-view>
</template>

效果：

在router.js中， /about 地址匹配的是Home的子路由， /about/a 匹配的是最外层的路由，所以访问 localhost:8080/#/about 会在Home中的<router-view>渲染组件，而访问 localhost:8080/#/about/a 会在App中的<router-view>渲染组件。

4.路由传参
四种传参方式：
(1)直接拼接在访问路径上
router.js

routes: [
      path: '/about/:id',
      name: 'About',
      component: About,

About.vue

<template>
    <div class="">参数为：{{$route.params.id}}</div>
</template>

效果：

说明：访问地址为 localhost:8080/#/about/1 ，其中/1就是匹配路径上的id，在页面组件中，通过访问 $route.params 可以取到参数id为1。
这种方式，会使组件和路由高度耦合，可以通过设置props属性解耦，使用更为灵活。
router.js

routes: [
      path: '/about/:id',
      name: 'About',
      component: About,
      props: true // 设置为true

About.vue

<template>
    <div class="">参数id：{{id}}</div>
</template>
<script>
export default {
    props: {
        id: {
            default: ''
</script>

(2) 通过?和&符号拼接在访问路径上
router.js

routes: [
      path: '/about',
      name: 'About',
      component: About,

About.vue

<template>
    <div class="">参数为：{{$route.query}}</div>
</template>

效果：

说明：访问地址 localhost:8080/#/about?id=1&name=abc 时，可以在页面组件中通过 $route.query 获取到参数对象。

(3)通过router实例方法传递参数
router.js

routes: [
      path: '/about',
      name: 'About',
      component: About,

About.vue

<template>
    <div class="">参数为：{{$route.params}}</div>
</template>

Home.vue

<template>
    <div class="">
        <div>home</div>
        <router-link :to="{name: 'About', params: {a: 1, b: 2}}">跳转到About</router-link>
        <div @click="$router.push({name: 'About', params: {c: 3, d: 4}})">点我也可以跳转</div>
</template>

说明：
①这里目标路由地址必须用name属性，如果使用path属性，在页面组件中无法获取到这里的params对象。
②这种方式传参，页面刷新后，无法获取params（,,ԾㅂԾ,,）。

(4)配置路由时，设置meta属性
这种方式，通常用来设置全局展示的内容，比如设置不同页面的title属性。
router.js

routes: [{
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
        id: '1'
    path: '/about',
    name: 'About',
    component: About,
    meta: {
        id: '2'

App.vue

<template>
  <div id="app">
    当前路由id：{{$route.meta.id}}
    <router-view></router-view>
</template>

说明：访问 localhost:8080/#/ 时， $route.meta.id 为1，访问 localhost:8080/#/about 时， $route.meta.id 为2。

5.重定向与别名
(1)重定向
router.j

routes: [
      path: '/about',
      name: 'About',
      component: About,
    path: '/other',
    redirect: '/about'

说明：此时访问 localhost:8080/#/other 会被重定向到 localhost:8080/#/about 路径。
redirect也可以是一个对象

{
    path: '/other',