npm install vue-router --save

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

Vue.use(VueRouter)

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1. 當我們使用其他插件的時候，就必須使用Vue.use安裝插件
Vue.use(VueRouter);

// 2. 定義路由，每個路由應(yīng)該映射一個組件
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3. 創(chuàng)建router實例
const router = new VueRouter({
  // 配置路由和組件之間的應(yīng)用關(guān)系
  routes,  // (縮寫) 相當于 routes: routes
});

// 4. 導(dǎo)出router對象，然后在main.js中引用
export default router;

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,  // 在vue實例中添加router對象，就可以使用路由了
  render: (h) => h(App),
}).$mount("#app");

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>
</style>

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>
</style>

template>
  <div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/about">關(guān)于</router-link>
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
</style>

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})