<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<link rel="stylesheet" href="css/style.css?v=3" />
<link rel="stylesheet" href="css/icons/iconfont.css" />
<title>容器运行情况监督</title>
</head>
<body>
<div class="header">
<div class="header_title">容器运行情况监督</div>
</div>
<div id="app">
<navlist></navlist>
<div id="navlist">
<div class="navbox">
<ul>
<li>
<router-link to="/Home" replace><h3>本地镜像列表</h3></router-link>
</li>
<li>
<router-link to="/About"><h3>远程镜像列表</h3></router-link>
</li>
<li>
</li>
</ul>
</div>
</div>
<div id="container">
<div class="routerview">
<router-view></router-view>
</div>
</div>
</div>
</body>
<script src="./components/navlist.js"></script>
<script type = "text/javascript">
// 创建自定义组件
const Home = Vue.extend({
template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
});
const About = Vue.extend({
template: '<div><p>这是一个About组件</p><div>About组件内容</div></div>'
});
//存放路径URL与组件额对应关系
let routes = [{
path: '/Home',
component: Home
}, {
path: '/About',
component: About
}];
//组装路由器
let router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
data() {
return {
msg: 'hello Vue 组件'
};
}
});
</script>
</html>
navlist.js 文件内容
var Navlist = Vue.extend({
template: '<div id="navlist">\
<div class="navbox">\
<ul>\
<li>\
<a href="/docker_manager/"><h3>本地镜像列表</h3></a>\
</li>\
<li>\
<a href="/docker_manager/"><h3>远程镜像列表</h3></a>\
</li>\
<li>\
<a href="/docker_manager/"><h3>远程运行容器</h3></a>\
</li>\
</ul>\
</div>\
</div>\
',
});
Vue.component('navlist', Navlist);// 组建实例，全局组件
