案例大部分都是用npm模式的,现在这个是使用cdn模式的更符合后端开发
html部分 , 注意template标签 ,定义上的id
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"</script>
</head>
<body>
<div id="app" class="chatKfPageApp">
<router-view></router-view>
</div>
<template id="chatKfIndex">
<div>111</div>
</template>
<template id="chatBox">
<div>222</div>
</template>
</body>
<script src="/static/js/chat-kf-page.js?v=0.1.1"></script>
</html>
js部分 , 注意每个template对应一个组件 , 子template可以继承父级的data变量 , 跳转的时候可以带着参数 , 获取到参数
//首页组件
var chatKfIndex = {
data: function(){
return {
visitors: {},
}
},
methods: {
},
created: function () {
},
template:$("#chatKfIndex").html()
};
//详情组件
var chatKfBox = {
data: function(){
return {
msgList: [],
messageContent: "",
face: [],
}
},
methods: {
init(){
alert(this.$parent.socket);
alert(this.$route.params.visitorId);
},
},
created: function () {
this.init();
},
template:$("#chatBox").html()
};
var routes = [
{ path: '/',component:chatKfIndex}, // 这个表示会默认渲染
{path:'/chatKfBox/:visitorId',component:chatKfBox},
];
var router = new VueRouter({
routes: routes
})
new Vue({
router,
el: '#app',
data: function(){
return{
socket:null,
}
},
created: function () {
this.socket=3;
},
})