码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router参数传递

时间:2019-12-19 13:22:47      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:username   uname   csdn   返回   接收   参数传递   import   无效   nbsp   

第一种:get方法

传值:

<router-link :to="{path:‘/get‘,query:{userId:123,username:‘xia‘}}">get跳转</router-link>
//
<router-link :to="{name:‘get‘,query:{userId:123,username:‘xia‘}}">get跳转</router-link>

接收值:

//在get.vue文件中
<template>
  <div>
    <p>get跳转页</p>
    <p>userId:{{userId}}</p>
    <p>username:{{username}}</p>
  </div>
</template>
<script>
    export default {
      data(){
          return{
            //接收值:
            userId:this.$route.query.userId,
            username:this.$route.query.username,
          }
      }
    }
</script>        

结果:url上显示参数,页面刷新后参数不会消失

技术图片

 

第二种:post方法

传值:

<router-link :to="{name:‘post‘,params:{stuId:456,stuName:‘shang‘}}">post跳转</router-link>
//在post中使用path是无效的,错误示范:
<router-link :to="{path:‘/post‘,params:{stuId:456,stuName:‘shang‘}}">post跳转</router-link>

接收值:

<template>
  <div>
    <p>post页面</p>
    <p>studentId:{{stuId}}</p>
    <p>studentName:{{stuName}}</p>
  </div>
</template>
<script>
    export default {
      data(){
          return{
            //接收值:
            stuId:this.$route.params.stuId,
            stuName:this.$route.params.stuName,
          }
      }
    }
</script>    

结果:url上不显示参数,页面刷新后参数会消失

技术图片

 

第三种:路由方法

传值:

<router-link to="/route/789/zuo">路由跳转</router-link>

接收值:

<template>
    <div>
      <p>路由传值</p>
      <p>rouId:{{rouId}}</p>
      <p>rouName:{{rouName}}</p>
    </div>
</template>
<script>
    export default {
      data(){
          return{
            rouId:this.$route.params.rouId,
            rouName:this.$route.params.rouName,
          }
      }
    }
</script>

结果:url上显示参数,页面刷新后参数不会消失

技术图片

注意:

(1)

上文中router-link中的path和name都是路由里面的,页面创建成功后一定要配置页面的路由;

上文中第三种方法,还在路由中也进行了相应的配置;

路由中的配置:

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path: ‘/get‘,
      name:‘get‘,
      component: resolve => require([‘../components/get.vue‘], resolve),
      meta: {
        title: ‘get‘
      },
    },
    {
      path: ‘/post‘,
      name:‘post‘,
      component: resolve => require([‘../components/post.vue‘], resolve),
      meta: {
        title: ‘post‘
      },
    },
    {
      path: ‘/route/:rouId/:rouName?‘
      name:‘route‘,
      component: resolve => require([‘../components/route.vue‘], resolve),
      meta: {
        title: ‘route‘
      },
    }
  ]
})

(2)

 当在链接上设置replace属性,点击时,会调用router.replace()而不是router.push(),于是浏览器不会留下history记录,也就是无法返回上一页,但会进入上上页;

 

简单说明router和route的区别:

$router :是指整个路由实例,你可以操控整个路由,用法如下:

  • this.$router.go(-1); // 向前或者向后跳转n个页面,n可为正整数或负整数
  • this.$router.push(‘/‘); // 跳转到指定url路径,history栈中会有记录,点击返回会跳转到上个页面
  • this.$router.replace(‘/‘); // 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面

$route:是指当前路由实例$router跳转到的路由对象;路由实例可以包含多个路由对象,它们是**父子包含关系**.

  • this.$route.params.userId// 获取路由传递过来的参数
  • this.$route.query.userName// 获取路由传递过来的参数

 

原文链接:https://blog.csdn.net/x550392236/article/details/88555153

vue-router参数传递

标签:username   uname   csdn   返回   接收   参数传递   import   无效   nbsp   

原文地址:https://www.cnblogs.com/czh64/p/12066921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!