[javascript] cdn模式下vue和vue-router实现路由
时间:2022-07-25
本文章向大家介绍[javascript] cdn模式下vue和vue-router实现路由,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例大部分都是用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;
},
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法