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},
        ]
      }
     
     
     
     

     

  • 相关阅读:
    测试网站的响应性的工具
    取出分组后的前N条数据,笔记记录。
    纯js制作页码导航
    英语单复数转换类
    用鼠标滚动缩放图片
    Plugin 'InnoDB' init function returned error.Could not start the service MySQL 解决方法
    超时时间已到。在操作完成之前超时时间已过或服务器未响应。
    数据库关系图”提示:此数据库没有有效所有者(转载)
    关于非静态类的静态成员与非静态成员的初始化顺序(zhuang)
    项目经理的“势能”培养 (转)
  • 原文地址:https://www.cnblogs.com/liumcb/p/7761017.html
Copyright © 2011-2022 走看看