案例大部分都是用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'var router = new VueRouter({ routes: routes }) Vue({ router,el: #app{ socket:nullthis.socket=3; },})