zoukankan      html  css  js  c++  java
  • vue.js 知识点(二)

    关于vue看到有很多的知识点和react有很多相近的地方,比如说路由还有一些简单的运用,但是又有一些不同,比如格式、还有写法的一些不同!

    所以在这里我总结一下关于vue 关于路由的一些运用:

    路由:

    1、在总页面中设置路由以及参数名,例如

      {

        path:"/hellopage/:id",

        name:'hellopage',

        component:hellopage

      }

    2、在新页面进行配制文件,

      这样点击之后就会跳转到新的页面,有两种方式:

      一:通过路由跳转  :to="/路径/参数"

      二:通过点击按钮,触发函数跳转   @click="跳转函数名”

      <div>

        <router-link  :to="{path:'/hellopage/123'}">第一个点击跳转</router-link>

        <router-link  :to="{path:'/hellopage/789“ query:{userid:9855,username:'liumcb‘}}>第一个点击跳转</router-link>

        <button  @click="clickhandle">这是点击跳转按钮</button>

      </div>

      

      如果是路由跳转,不需要在这个页面有什么额外操作了,若是函数跳转, 则需要添加新的一些methods方法

      methods:{

        clickpage:function(){

        this.$router.path({path:"/hellopage/224",query:{userid:566,name:"liumcb2"}})

      }

    }

    3、在新的页面接受参数

      export default {

      name:"hellopage",

      data(){

        return (){

        //设置接受参数的参数名

        id:this.$route.params.id.    //接受参数,这个参数就是第一个页面中,配制的参数

        userid:this.$route.query.userid,    //这个参数是从路由中接收到的设置的query参数

        username:this.$route.query.name

        }

      }

    }

      在新的页面中使用这些参数

      <div>

        <p>接受的参数id:<span>{{{id}}</span></p>

        <p>接受的参数userid:<span>{{userid}}</span></p>

        <p>接受的参数username:<span>{{username}}</span></p>

      </div>

    总结起来 这就是路由的一些用法了,看起来跟react十分相似;

    1、其中router-link 中可以添加query={id:'123‘}  query的作用是给链接后面拼接内容。

      例如,原来是  newpage/123?id=123 

      所以,当为链接添加更多参数的时候,可以使用query参数进行拼接url

    2、给页面添加子页面的时候,在需要添加子页面的地方添加

      <router-view></router-view>
      并且在router路由的页面引用子页面,并且添加新子页面的路由:
      
      {
        path: '/newpage/:id',
        name: 'newpage',
        component: newpage,
        children:[
          {path:'info/:id',component:info},
          {path:'content/:id',component:content},
        ]
      }
     
     
     
     

     

  • 相关阅读:
    VTK初学一,动画加AVI录制终于做出来了
    QCamera获取摄像头图像(转载)
    VTK初学一,比较常见的错误2
    myeclipse2014鼠标单击后光标位置背景底色为白色太难看,行号显示
    记一次跟二房东公司(非中介个人房源无中介费)租房的经历
    求16进制数据或运算后的值(即多个16进制相加的和)
    error LNK2001: 无法解析的外部符号 "public: char * __thiscall
    如何利用指向数组的指针得到数组元素个数?
    C++判断字符串是否为空的一个小问题
    C++开发中BYTE类型数组转为对应的字符串
  • 原文地址:https://www.cnblogs.com/liumcb/p/7761017.html
Copyright © 2011-2022 走看看