Vue中如何利用路由实现页面的跳转和切换

npm install vue-router

yarn add vue-router

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

Vue.use(VueRouter)

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  mode: 'history' // 可选，使用history模式可以去掉URL中的#
})

export default router

// main.js

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

new Vue({
  router, // 将路由配置注入Vue实例
  render: h => h(App)
}).$mount('#app')

<!-- Home.vue -->

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
    <router-link to="/contact">Go to Contact</router-link>
  </div>
</template>

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>