Vue路由vue-router是官方提供的一个插件，Vue要使用插件必须先安装插件。
一、安装插件
npm install vue-router --save
--save 是保存配置信息到 pacjage.json，默认为 dependencies 节点中
二、代码中安装路由插件以及创建路由对象
这部分内容写在router/index.js文件中
router/index.js
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from "../components/Home";
import About from "../components/About";
// 1. 安装插件
Vue.use(VueRouter)
const routes = [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: Home
},
{
path: "/about",
component: About
}
]
// 2. 创建路由对象
const router = new VueRouter({
routes
});
// 3. 导出router
export default router;
router对象创建完并导出之后，需要在main.js中挂载路由对象
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘ //导入路由对象。当导入目录下的index.js，可以省略index.js，因为导入 ‘./router‘，其实是导入 ‘./router/index.js‘
Vue.config.productionTip = false
new Vue({
router, // 挂载路由对象，必须将路由对象挂载到vue实例中
render: h => h(App),
}).$mount(‘#app‘)
三、使用路由
vue-router提供了两个标签：
1. <router-link>
2. <router-view>
<router-view>根据浏览器中的地址，动态渲染地址对应的组件，这个对应关系在 router/index.js中配置
<router-link>可以切换浏览器中的地址
由于main.js中
new Vue({
router,
render: h => h(App),
}).$mount(‘#app‘)
默认是render App.vue组件，所以<router-link>和<router-view>要写在App.vue组件中
App.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link> <!-- 这里控制浏览器地址的内容 -->
<router-link to="/about">关于</router-link>
<router-view></router-view> <!-- vue根据浏览器的地址，将对应的组件渲染到该位置 -->
</div>
</template>
<script>
export default {
name: ‘App‘,
components: {
}
}
</script>
<style>
</style>
到此，就实现了 首页 和 关于 的切换
原文：https://www.cnblogs.com/africancu/p/12766393.html