持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

前言

router翻译过来就是路由的意思，什么是路由？路由就是通过互联网的网络把信息从源地址传输到目的地址的活动，那什么是vue-router？

官方说法是：Vue Router 是前端路由，也是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举，功能包括：嵌套路由映射，动态路由选择，路由参数、查询、通配符等等，在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装路由

我们要使用路由就要先安装路由，在脚手架创建项目的时候可以为我们自动创建，也可以手动通过npm下载

npm install vue-router --save

配置

脚手架创建路由时已经为我们自动配好了，手动下载的需要自己配置。创建router文件夹->创建index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//创建路由对象
const routes = [
  
]

const router = new VueRouter({
  routes
})

//导出路由对象
export default router

main.js引入

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

vue-router的基本使用

创建路由组件

创建两个vue文件，分别写入一些东西

//Home.vue文件
<template>
  <div>
    <h2>home页面</h2>
  </div>
</template>

//About.vue文件
<template>
  <div>
    <h2>about页面</h2>
  </div>
</template>

配置路由映射

在路由对象里配置路由映射关系

import Home from '@/components/Home'
import About from '@/components/About'

const routes = [//一个映射关系就是一个对象
  {
    path:'/home',
    component:Home
  },
  {
    path:'/about',
    component:About
  },
]

使用路由`<router-link>`和`<router-view>`

<router-link>本质上是一个a标签，用于跳转，在<router-link>有个to属性，用于跳转的路径，将页面路径设置为刚刚配好的映射关系里的path

<router-view>是一个容器，它渲染的组件是你使用 vue-router 指定的。会根据当前的路径，动态渲染出不同的组件

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>//渲染出来的组件放在这个位置，替代<router-view>标签
  </div>
</template>

可以看见点击标签展示出来的组件发生了变化，右上角的路径就是路由对象里映射关系的path

配置路由默认路径

一般情况下都会有一个默认页面的，但是上面需要点击才会显示出来内容，所以要在router里新增一个映射，path配置的是根路径/，redirect是重定向的意思，我们将根路径重定向到/home的路径下，这样页面就默认展示/home组件里的内容出来

{
    path:'/',
    redirect: '/home'
},

重新进入页面默认展示/home组件内容

`<router-link>`的其他属性

<router-link>除了to属性还有其他的属性：

tag：<router-link>默认是一个a标签，可以指定<router-link>渲染成其他元素，例如设置tag属性为button

2.replace：replace不会留下history记录，指定replace情况下，后退键不能返回到上一页页面中

3.active-class当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称（不常用）

通过代码跳转路由

除了标签跳转还有其他方法跳转路由嘛？vur-router为我们提供了一个方法this.$router.push(路由路径)，这样就可以通过代码的方式来跳转路由

<button @click="goHome">Home</button>
<button @click="goAbout">About</button>
<router-view></router-view>

goHome(){
  this.$router.push('/home')
},
goAbout(){
  this.$router.push('/about')
},

动态路由的使用

当我们有一个商品的组件，我们需要让不同的商品id都映射到这个组件中，该怎么办呢？难道创建多个不同id的映射吗，此时就需要用到动态路由了，动态路由就是把匹配某种模式下的路由映射到同个组件中，本质就是通过url进行传参

在配置映射的时候path使用：动态绑定参数

path:'good/:goodsID'

跳转时拼接上参数

<router-link to="/good/001" tag="button">Good</router-link>

但是在开发中这个参数一般是动态的，在data里定义一个goodId，在动态拼接上参数，就可以实现上图效果

data(){
    return {
        return:'001'
    }
}

<router-link :to="'/good/'+goodId" tag="button">Good</router-link>

如果想获取这个id展示出来，可以使用$route对象，这个$route对象和$router是不同的，一个用来获取路径上的参数的，一个实现页面之间的跳转

//good组件
<div>
    <h2>good页面</h2>
    {{goodid}}
</div>

computed: {
    goodid(){
        return this.$route.params.goodsID
    }
}

传递参数的方式

传递参数的方式除了params还有query

params的类型：配置路由格式/router/:id，传递的方式就是在path后面跟上对应的值，获取参数方式为$route.params

query的类型：配置路由格式/router，传递的方式是在对象中使用query的key作为传递方式，传递后形成的路径/router?id=123，获取参数方式为$route.query

//params传参 标签和代码方式
<router-link :to="'/good'+id" tag="button">Good</router-link>
transmit(){
    this.$router.push('/good'+id)
}

//query传参 标签和代码方式
<router-link :to="{path:'/good',query:{id:'002'} }" tag="button">Good</router-link>

transmit(){
    this.$router.push({
        path:'good',
        query:{
            id:'002'
        }
    })
}

嵌套路由

在开发中会经常遇到路由嵌套路由，嵌套路由的关键属性是children，children也是一组路由，children可以像routes一样的去配置路由数组：

{
    path:'/good',
    component:Good,
    children:[
        {
            path:'/good/good_item',
            component:Good_item
        },
    ]
}

<div>
    <h2>good页面</h2>
    <router-view></router-view>
</div>

Vue-VueRouter使用

前言