案例大部分都是用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 = { msgList: [],messageContent: "",face: [],methods: { init(){ alert(this.$parent.socket); alert(this.$route.params.visitorId); },},created: function () { .init(); },1)">#chatBoxvar routes = [ { path: '/',component:chatKfIndex}, 这个表示会默认渲染 {path:/chatKfBox/:visitorId'Box},]; var router = new VueRouter({ routes: routes }) Vue({ router,el: #app{ socket:nullthis.socket=3; },})
