精华内容
下载资源
问答
  • table.vue传参页面: 如下:在methods:{ 写修改的方法} 两种方法传参, 第一种传参 name 与 结合使用params ,第二种传参 path 与 query结合使用 ,区别:query更加类似于我们ajax中get传参...

    table.vue(表格列表页——点击修改)

    bianji.vue(编辑页面——form表单,得到table里给传过来的值)

     table.vue 要传参的页面:

     

    如下:在methods:{ 写修改的方法}

    两种方法传参,

    第一种传参  name 与 params 结合使用 ;

    第二种传参  path 与  query 结合使用  ;

    区别:

    query更加类似于我们ajax中get传参;

    params则类似于post;说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示 

    1、this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

    2、this.$router.push({path:'路由命名', query:{ 参数名:参数值 } })

    接收参数的页面 bianji.vue

    1、this.$route.params.参数名

    2、this.$route.query.参数名

     

     

     

    直接用class名字也可以,如:

    用params与name传参时需要配置路由  页面配置 index.js

    配置name

    取消按钮返回到列表页

    展开全文
  • vue页面传参和接参

    2019-03-12 15:52:00
    js** this.$router.push({ name: 'Flow', params: { id:data }})//跳转传参数 //接参 console.log(this.$route.params) 页面** 在父路由组件上使用router-lin...

     https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy)

    js**

    this.$router.push({ name: 'Flow', params: { id:data }})//跳转传参数

    //接参

    console.log(this.$route.params)

    页面**

    在父路由组件上使用router-link进行路由导航,传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染,父路由组件childOne.vue 如下:
    <template>
    <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link to="/one/log/123">显示登录页面</router-link>
    <router-link to="/one/reg/002">显示注册页面</router-link>
    <router-view></router-view>
    </div>
    </template>
    子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数,子路由组件login.vue如下:
    <template>
    <div style="border:1px solid orange;color:orange;">
    <p>登录界面:这是另一个嵌套路由的内容</p>
    <h3>{{this.$route.params.num}}</h3>
    </div>
    </template>

    注意:如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确,否则不断点击切换路由,会因为不断将传递的值显示添加到url中导致路由出错,如下

     

    传递的值存在url中存在安全风险,为防止用户修改,另一种方式不在url中显示传递的值

     

    params传参(url中不显示参数)
    定义路由时添加name属性给映射的路径取一个别名,router>index.js文件修改router如下:

    在父路由组件上使用router-link进行路由导航,使用   <router-link :to="{name:'home',params:{id:001}}>    形式传递参数。注意   ': to= ' 前面的冒号,childOne.vue组件修改如下:
    <template>
    <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
    <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
    <router-view></router-view>
    </div>
    </template>
    子路由组件页面获取父路由传参方式不变,reg.vue 文件如下:
    <template>
    <div style="border:1px solid orange;color:orange;">
    <p>登录界面:这是另一个嵌套路由的内容</p>
    <h3>子路由获取的参数:{{this.$route.params.num}}</h3>
    </div>
    </template>
     

    注意:上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;

     

     

    使用Query实现路由传参
    定义路由 router>index.js文件如下:

    修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ,childOne.vue 文件修改如下:
    <template>
    <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
    <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
    <router-view></router-view>
    </div>
    </template>
    子路由组件通过 this.$route.query.num 来显示传递过来的参数,reg.vue 文件如下:
    <template>
    <div style="border:1px solid purple;color:purple;">
    <p>注册界面:这是二级路由页面</p>
    <h3>{{this.$route.query.num}}</h3>
    </div>
    </template>

     

    转载于:https://www.cnblogs.com/dianzan/p/10517214.html

    展开全文
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ ...
  • <router-link :to="{path:'course/newcourses',query:{value:JSON.stringify(value)}}">...//处理query传参页面刷新数据丢失问题 created() { this.listcontent = JSON.parse(this.$route.query.value);
    <router-link  :to="{path:'course/newcourses',query:{value:JSON.stringify(value)}}">
    	<span class="operation">详情</span>
    </router-link>
    

    跳转

    //处理query传参页面刷新数据丢失问题
    		created() {
    			this.listcontent = JSON.parse(this.$route.query.value);
    			console.log(this.listcontent);
    			this.chapter();
    			this.getDataClass();
    		},
    		beforeRouteEnter(to, from, next) {
    			next(vm => {
    				// vm.targetUser = JSON.parse(to.params.user)
    				vm.targetUser = JSON.parse(to.query.user)
    			});
    		},
    

    接收 beforeRouteEnter用来处理页面刷新数据丢失问题

    展开全文
  • 记录自己犯的一个小错误。 clickRow(row) { ...这是前端页面跳转和传参的代码。 mounted() { console.log(this.$router.query.eventsId); } 这是跳转后接收参数的代码,找了各种问题一直是undefine

    记录自己犯的一个小错误。

    clickRow(row) {
          this.$router.push({
            path: "/gecamEventInfo",
            query: { eventsId: row.eventsId }
          });
        }
    

    这是前端页面跳转和传参的代码。

    mounted() {
        console.log(this.$router.query.eventsId);
      }
    

    这是跳转后接收参数的代码,找了各种问题一直是undefined,结果发现是route写成router了。改正如下解决问题:

    mounted() {
        console.log(this.$route.query.eventsId);
      }
    
    展开全文
  • //传参页面 this.$router.push({name: 'SearchResult', params: {syyName: this.searchVal, syyType: this.searchQuesTitle}}) 接收页面: //接参页面 // 对接钩子参数 var sname = this.$route.params.syyName; ...
  • Vue 页面传参

    2020-01-07 16:18:39
    Vue 页面传参 1. router-link <router-link :to="{ path: '/', name:'base', params: {status:200}, query:{id:2} }"> 点击 </router-link> 2. this.$router.push this.$router....
  • Vue 页面传参方式 Query 和 Params

    千次阅读 2020-01-17 09:19:02
    Vue 页面传参方式 Query 和 Params
  • 关于vue页面传参

    2020-06-24 18:51:42
    页面之间的传参是不可避免的操作,那vue框架中关于页面传参的方式都有哪些呢?GO,带着疑问直奔主题!! 第一种方式:利用路由导航router-link中to属性传递参数 第二种方式:通过this.$router.push()传递参数 补充...
  • VUE页面传参

    2020-02-24 11:12:02
    VUE页面传参 1.通过params/query传参(以params为例) 传递参数 let that=this; this.$router.push({ name: 'blog', params:{ blog:that.blog } ...
  • vue页面传参

    2019-09-25 07:06:25
    vue页面跳转,传参方式大约可以有下面3种情况。 标签跳转及传参(router-link) js控制跳转路由及传参(this.$router.push) 路由组件传参  下面看一下这3者。  一、标签跳转及传参  :to后面可以跟字符...
  • iframe 向 vue 页面传参vue 页面; iframe 页面:
  • vue 页面跳转传参

    千次阅读 2020-12-29 02:38:48
    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了;但是vue不一样 需要操作的是路由history,需要用到 VueRouter,示例:常用的场景是:列表页点击“查看”按钮,跳转到详情页。在...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name...
  • 方法一 路由文件的配置: 此时不需要做任何的更改 其他组件来获取传递的参数: 在url上表现的显示: 方法二 设置要传递的参数 此时路由文件需要简单的配置一下: ...点击其中的详细信息,进行跳转页面 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,265
精华内容 8,106
关键字:

vue页面传参

vue 订阅
友情链接: XMLParse.rar