一、学习脚手架--组件之间跳转与参数(组件之间参数)
组件之间跳转主要(组件1->跳->组件2)
(1)标签方式跳转(优先选)
<router-link to="组件路径">
.....
<router-link>
示例:Home.vue -> NewsList.vue
<router-link to="/NewsList">
</router-link>
(2)编程序方式跳转
this.$router.push("组件路径");
示例:
<img src="1.jpg" @click="jump"/>
jump(){
this.$router.push("/NewsList");
}
示例:
Exam01.vue -> NewsList.vue
<h1 @click="jump">跳转NewsList.vue 组件</h1>
jump(){
this.$router.push("/NewsList")
}
(3)组件之间跳转需要传递参数
Exam01.vue ->NewsList.vue
?nid=6
-传递参数 Exam01.vue
this.$router.push("/NewsList?nid=6")
-接收参数 NewsList.vue
var id = this.$route.query.nid;
#通常情况接收参数 created()
#$router 属性负责组件之间跳转
#$route 属性负责接收参数
2.2:新闻列表/新闻详细
-创建空组件 src/components/home/NewsInfo.vue
-添加组件访问路径 /NewsInfo
-检查 NewsList.vue 新闻列表
标签跳转
<router-link :to="'/NewsInfo?nid='+item.id">
</router-link>
编程方式 ?nid=变量
-创建ajax 请求获取新闻详细信息
-node.js /findNewsInfo
参数:id
验证参数是否合法: /^d{1,}$/
sql: SELECT id,title,content,ctime,img_url FROM xz_news WHERE id=?
json:{code:1,data:[]}
-保存当前 data:{info:{}}
2.3:新闻详细
-添加 mui card.html 卡片布局
-添加 新闻 标题 内容 时间
-发送ajax请求获取数据并显示
练习:定义过滤器 2019-01-20
2.4:新闻评论
-创建表 xz_comment[id;content;ctime;nid]
-创建服务器程序 /getComment
参数:nid 新闻id
sql:SELECT id,content,ctime,nid FROM xz_comment WHERE nid=?
json:{code:1,data:[]}
-创建空子组件 src/components/sub/comment.vue
-在新闻组件中添加评论子组件
(1)在父组件引入子组件
import comment from "../sub/comment.vue"
(2)在父组件注册子组件并且指定子组件标签名称
components:{
"子组件名称": comment
}
(3)在父组件中调用子组件
<子组件名称></子组件名称>
常见错误
1:乱码 ???
乱码原因只有一种:{编码不统一}
mysql utf8/db utf8/table utf8/nodes.js utf8/vue utf8
编码方式: gbk/utf-8/latin-1[iso-8859-1]
mysql命令: status 查看编码
解决方案:99%
-如果有中文sql语句不要复制粘贴
-打开 xampp ->mysql [Admin] 点击->phpmyadmin
-点击xz库-> 点 sql标签 ->粘贴->[执行]