<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
</style>
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h1>这是 Account 组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<!-- 子组件 -->
<template id="login">
<div>
<h1>登录一下</h1>
</div>
</template>
<template id="register">
<div>
<h1>注册一下</h1>
</div>
</template>
<script>
var login = {
template: '#login'
};
var register = {
template: '#register'
};
var account = {
template: '#tmp1'
};
var routerObj = new VueRouter({
routes: [{
path: '/account',
component: account,
//正确的方法写在children里面
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
},
// 错误方法
// { path : '/account/login' , component : login},
// { path : '/account/register' , component : register},
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
router: routerObj
});
</script>
</body>
</html>
