<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 根据:is属性制定的组件名称 把对应的组件渲染到component标签所在的位置 -->
<!-- 可以把componnnet标签的占位符 -->
<component :is="comName"></component>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script>
var zhuye = {
template: `<h1>主页信息</h1>`
}
var keji = {
template: `<h1>科技信息/h1>`
}
var caijing = {
template: `<h1>财经信息/h1>`
}
var yule = {
template: `<h1>娱乐信息/h1>`
}
var vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
//注册私有组件
components: {
zhuye,
keji,
caijing,
yule,
}
})
//#re gion 定义需要被切换的4个组件
window.onhashchange = function() {
// console.log(location.hash);
switch (location.hash.slice(1)) {
case '/zhuye':
vm.comName = 'zhuye'
break;
case '/keji':
vm.comName = 'keji'
break;
case '/caijing':
vm.comName = 'caijing'
break;
case '/yule':
vm.comName = 'yule'
break;
}
}
</script>
</body>
</html>
标签：vue,zhuye,前端,comName,vm,caijing,yule,var,93 From： https://blog.51cto.com/u_15460007/6050404