|
案例大部分都是用npm模式的,現(xiàn)在這個(gè)是使用cdn模式的更符合后端開發(fā)
html部分 , 注意template標(biāo)簽 ,定義上的id <script src="https://cdn./npm/vue/dist/vue.js"></script>
<script src="https://cdn./npm/vue-router/dist/vue-router.js"></script>
<script src="https://cdn./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部分 , 注意每個(gè)template對(duì)應(yīng)一個(gè)組件 , 子template可以繼承父級(jí)的data變量 , 跳轉(zhuǎn)的時(shí)候可以帶著參數(shù) , 獲取到參數(shù) //首頁組件 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}, // 這個(gè)表示會(huì)默認(rèn)渲染 {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; }, })
|
|
|
