npm i vue-router -S

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)

import Vue from 'vue'
//1.导⼊
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
//2.模块化机制 使⽤Router
Vue.use(Router)
//3.创建路由器对象
const router = new Router({
 routes:[{
 path: '/home',
 component: Home
 },
 {
 path: '/about',
 component: About
 }
 ]
})
export default router;

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
 // 4.挂载根实例
 router,
 render: h => h(App)
}).$mount('#app')

<template>
 <div id="app">
 <div id="nav">
 <!-- 使⽤router-link组件来导航 -->
 <!-- 通过传⼊to属性指定连接 -->
 <!-- router-link默认会被渲染成⼀个a标签 -->
 <router-link to="/">Home</router-link> |
 <router-link to="/about">About</router-link> |
 </div>
 <!-- 路由出⼝ -->
 <!-- 路由匹配的组件将被渲染到这⾥ -->
 <router-view/>
 </div>
</template>

// index.js里面的内容

import Vue from 'vue'
// 1.导入
import VueRouter from 'vue-router'
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue'
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// main.js里面的内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 4.挂载到vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

// App.vue里面的内容

<template>
  <div id="app">
    <nav>
      <!-- router_link相当于a标签，to属性相当于a标签的href -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

// HomeView.vue里面的内容

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

// AboutView.vue里面的内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>