案例大部分都是用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; }, })