1、安装

直接下载/CDN

// html
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

npm/yarn

// sh
npm install vue-router 
// 或者
yarn add vue-router

Vue CLI

// sh
vue add router

2、使用

以实现一个点击不同的标签可以跳转到不同页面的 demo 为例

首先创建一个存放路径的文件

import Vue from 'vue';
import VueRouter, {RouteConfig} from 'vue-router';
import Home from '@/views/Home.vue';
import Bill from '@/views/Bill.vue';
import Form from '@/views/Form.vue';

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  { // 页面一
    path: '/home',
    component: Home
  },
  { // 页面二
    path: '/bill',
    component: Bill
  },
  { // 页面三
    path: '/form',
    component: Form
  }
];

const router = new VueRouter({
  routes
});

export default router;

在 Vue 组件中使用

使用 <router-link to="/path路径">

<template>
  <div id="app">
    <router-view/>
    <router-link to="/home">主页</router-link>
    |
    <router-link to="/bill">账单</router-link>
    |
    <router-link to="/form">报表</router-link>
  </div>
</template>

显示的 url

如果要做一个页面的子页面可以

import EditLabel from '@/components/EditLabel.vue';

{
  path:'/labels/edit/:id',
  component:EditLabel
},

可以这样使用

<router-link :to="`/labels/edit/${id}`"/>

显示的 url