vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用；
单页应用（SPA）只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容；简单来说，根据不同的url与数据，将他们都显示在同一个页面中，就可称为单页应用；而控制页面跳转需要用路由。
vue-router下载：下载js,或使用npm install vue-router-S;
vue-router使用：
1、定义组件；
2、配置路由；
3、创建路由对象；
4、注入路由
vue-router官网：https://router.vuejs.org/zh/
实例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="one">
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link>
<div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script>
//1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
}
//2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
]
// 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
});
new Vue({
//router : router
router : myRouter //4 注入路由 简写
}).$mount("#one");
</script>
</html>
Vue-Router路由Vue-CLI脚手架和模块化开发 之 vue-router路由
原文：https://www.cnblogs.com/jiguiyan/p/10700188.html