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

     

  • 相关阅读:
    hadoop+海量数据面试题汇总(二)
    hadoop+海量数据面试题汇总(一)
    Java文件下载
    Spring+struts+ibatis(一)环境准备工作
    在Action类中获得HttpServletResponse对象的四种方法
    产品需求文档写作方法(三)用例文档(UML用例图、流程图)
    产品需求文档写作方法(二)原型设计+撰写设计
    产品需求文档写作方法(一)写前准备+梳理需求
    使用Java操作文本文件的方法详解
    计算两个时间相隔多少时间段的类,可以直接拿来用哦!
  • 原文地址:https://www.cnblogs.com/liumcb/p/7761017.html
Copyright © 2020-2023  润新知