<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/vue-rute.js" ></script>
</head>
<body>
<div class="" id="app">
<div id="" class="list-group">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">home</router-link>
<br />
<router-link to="/home1">home1</router-link>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!--定义模版-->
<template id="child1">
<div>
{{data}}
</div>
</template>
<template id="child2">
<div>
{{data}}
</div>
</template>
</body>
<script type="text/javascript" charset="utf-8">
//这是vue2的路由用法，vue1的map方法不支持
//创建组件一
var Child=Vue.extend({
template:"#child1",
data:function(){
return{
data:"child1数据"
}
}
})
//创建组件2
var Child1=Vue.extend({
template:"#child2",
data:function(){
return{
data:"child2数据"
}
}
})
//配置路由
var routes=[
{
path: ‘/‘,
component: Child//默认显示home
},
{
path:"/home",
component:Child
},
{
path:"/home1",
component:Child1
},
]
//生成路由实例
var router=new VueRouter({
routes
});
//挂载路由
var vm=new Vue({
el:"#app",
router
})
</script>
</html>
原文地址：https://www.cnblogs.com/zyb-722/p/10333494.html