Vue router 路由安装及使用过程

<template>
    <div>
        <h1>Home页面</h1>
        <router-link to="/about">前往About页面</router-link>
    </div>
</template>
<script>
export default {
    name: "Home"
}
</script>

<template>
    <div>
        <h1>About页面</h1>
        <router-link to="/">前往Home首页</router-link>
    </div>
</template>
<script>
export default {
    name: "About"
}
</script>

// 引入Vue核心库
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 应用vue-router插件
Vue.use(VueRouter)
// 引入组件（方式一）
import Home from '../views/Home.vue'
// 配置路由
const routes = [
  {
	// 路径，/ 表示首页
    path: '/',
    // 使用组件（方式一）
    component: Home
  },
  {
	// 路径
    path: '/about',
    // 引入并使用组件（方式二）
    component: () => import('../views/About.vue')
  }
]
// 创建路由器
const router = new VueRouter({
  routes
})
// 导出路由器
export default router

import Home from '../views/Home.vue'
component: Home

component: () => import('../views/About.vue')

import Vue from 'vue'
import App from './App.vue'
// 1.引入vue-router
import router from './router'
Vue.config.productionTip = false
new Vue({
  // 2.挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

<template>
  <router-view></router-view>
</template>