版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33867131/article/details/81807611
<head>
# 引入vue
<script type="text/javascript" src='vue.js' ></script>
# 引入vue-router
<script type="text/javascript" src='vue-router.js' ></script>
</head>
<body>
<div id='box'>
<a v-link='{path:"/xiaojia"}'>关于小甲</a>
<a v-link='{path:"/xiaoyi"}'>关于小乙</a>
<a v-link='{path:"/xiaoding"}'>关于小丁</a>
<router-view></router-view>
</div>
1、准备模板
<template id='xiaojia'>
<h1>这里是小甲页面</h1>
# 这里写了一个二级路由（嵌套路由）
<h1><a v-link='{path:"/xiaojia/xingzuo"}'>小甲的星座</a></h1>
<router-view></router-view>
</template>
<template id='xiaoyi'>
<h1>这里是小乙页面</h1>
</template>
<template id='xiaoding'>
<h1>这里是小丁页面</h1>
</template>
<template id='xingzuo'>
<h1>小甲星座介绍页面</h1>
<h5>我是天蝎座</h5>
<h9>天蝎和巨蟹很配哦！！！</h9>
</template>
<script type="text/javascript">
2、准备开始阶段
var app = Vue.extend();
3、准备路由
var router = new VueRouter();
4、关联模板
router.map({
// 当点击 关于小甲 时跳到 id='xiaojia' 的组件
'xiaojia':{
component:{
template:'#xiaojia'
},
subRoutes:{
// 当点击 小甲的星座 时跳到 id='xingzuo' 的组件 (在二级路由下嵌套三级路由)
'xingzuo':{
comonent:{
template:'#xingzuo'
}
}
}
},
'xiaoyi':{
component:{
template:'#xiaoyi'
}
},
'xiaoding':{
component:{
template:'#xiaoding'
}
}
});
5、启动路由
router.start(app, 'box'); # box为作用域
6、配置默认值
router.redirect({
'/':'xiaojia', # 默认地址
'/xiaojia':''
});
</script>
</body>