<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- 1.设置链接 -->
<router-link to="/home">主页</router-link>
<!-- 目的: 点击三个不同的router-link 渲染同一个组件
点击 篮球/足球/乒乓球按钮 -> 渲染Ball组件 -->
<router-link to="/ball/football">足球</router-link>
<router-link to="/ball/basketball">篮球</router-link>
<router-link to="/ball/pp">乒乓球</router-link>
<!-- 2. 提供容器:将来渲染组件 -->
<router-view></router-view>
</div>
<script src='./vue.js'></script>
<script src="./vue-router.js"></script>
<script>
// 3. 提供要渲染的组件选项(对象)
const Home = { template: `<div>首页组件</div>` };
const Ball = { template: `<div>我是球组件</div>` };
const routes = [{
path: "/home",
component: Home
}, {
// /ball/football
// /ball/basketball
// /ball/pp
// 视图中->点击足球按钮->url标识变成/ball/football -> 找路由配置
// -> 发现有动态路由配置 -> id的值就是football值
// :固定写法 id可以任意命名
path: "/ball/:id",
component: Ball
}];
// 4. 实例化路由对象
const router = new VueRouter({ routes });
new Vue({
el: '#app',
// 6. 挂载(使用)路由
// router:router
router,
data: {},
methods: {}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/divtab/p/10940960.html