学习脚手架--组件之间跳转与参数(组件之间参数)

1、学习脚手架--组件之间跳转与参数(组件之间参数)

     组件之间跳转主要(组件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标签 ->粘贴->[执行]