• 安装vue-router

npm install vue-router

• 新建一个router文件夹 创建一个js文件

• index.js

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

• 在 mian.js中引用在index.js创建的路由对象

import Vue from 'vue'
import App from './App'
// 引入路由文件
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  // 引入路由对象
  router,
  render: h => h(App)
})

• 在App.vue中使用配置好的路由

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <!-- 直接使用   -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!--通过函数跳转-->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      // 通过代码的方式修改路由 vue-router
      // push => pushState
      // this.$router.push('/home')
      this.$router.replace('/home')
      console.log('homeClick');
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
      console.log('aboutClick');
    }
  }
}
</script>

<style>
  /*.router-link-active {*/
    /*color: #f00;*/
  /*}*/

  .active {
    color: #f00;
  }
</style>