zoukankan      html  css  js  c++  java
  • Vue系列:通过vue-router如何传递参数

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下:

    主要有以下几个步骤:
    (1) 设置好路由配置
    router.map({
      '/history/:deviceId/:dataId': {
        name: 'history', // give the route a name
        component: { ... }
      }
    })
    这里有2个关键点:
        a)给该路由命名,也就是上文中的 name: 'history',
        b)在路径中要使用在路径中使用冒号开头的数字来接受参数,也就是上文中的 :deviceId, :dataId;
     
    (2)在v-link中传递参数;
        <a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>
    这里的123,456都可以改用变量。
    比如该template所对应的组件有2个变量定义如下:
    data: function() {
        return {
          deviceId:123,
          dataId:456
            }
    }    
    此时上面那个v-link可以改写为:
        <a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>
    (3)在router的目标组件上获取入参
        比如在router目标组件的ready函数中可以这么使用。
        ready: function(){
            console.log('deviceid: ' + this.$route.params.deviceId);
            console.log('dataId: ' + this.$route.params.dataId);
        }


    ————完————





  • 相关阅读:
    接口测试总结
    Jmeter教程索引贴
    [转] 配置Log4j
    Jmeter报告优化之New XSL stylesheet
    Jmeter默认报告优化
    iOS 自动移除KVO观察者
    iPhone X 适配 ( iOS 11适配 )
    iOS中自动登录的设计
    iOS APP 安全测试
    APP安全测评checklist---Android
  • 原文地址:https://www.cnblogs.com/strinkbug/p/5779531.html
Copyright © 2011-2022 走看看