精华内容
下载资源
问答
  • vue路由传对象形式参数
    千次阅读
    2021-05-18 21:57:44

    在路由跳转传参的时候参数可能会是一个对象,但首次跳转成功接受成功后这个参数会出现,但是一旦刷新这个参数就会变成 [object,object]

    在这个是时候我们在路由跳转传递参数的时候用 JSON.stringify() 将参数转换为字符串  如:

    let str = JSON.stringify(item);
    this.$router.push({ path: "/Ebooksclassified", query: { str } });

    在接受这个参数的时候用 JSON.parse() 再转换一下即可 如:

    let detailArr = JSON.parse(this.$route.query.detailstr);

     

    更多相关内容
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • Vue 路由参数传递

    2022-04-16 21:44:25
    Vue路由参数传递

    上一节:Vue 路由的基本使用

    路由的query参数

    先看效果
    在这里插入图片描述
    我们需要创建一个 Detail.vue 组件,根据点击的消息来展示消息id和标题

    创建路由规则,修改 index.js

    ......
    import Detail from "../pages/Detail";
    //创建并暴露一个路由器
    export default new VueRouter({
        routes: [
            {......},
            {
                path: '/home',
                component: Home,
                children: [
                    {......},
                    {
                        path: 'message',
                        component: Message,
                        children: [
                            {
                                path: 'detail',
                                component: Detail
                            }
                        ]
                    }
                ]
            },
        ]
    })
    

    修改 Message.vue 组件

    <template>
      <div>
        <ul>
          <li v-for="m in messageList" :key="m.id">
            <!--跳转路由并携带query参数,to的字符串写法-->
            <!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>-->
            <!--跳转路由并携带query参数,to的对象写法-->
            <router-link :to="{
              path:'/home/message/detail',
              query:{
                id:m.id,
                title:m.title
              }
            }">
              {{ m.title }}
            </router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "Message",
      data() {
        return {
          messageList: [
            {id: "001", title: "消息001"},
            {id: "002", title: "消息002"},
            {id: "003", title: "消息003"},
          ]
        }
      }
    }
    </script>
    

    创建 Detail.vue 组件

    <template>
    <ul>
      <li>消息编号:{{$route.query.id}}</li>
      <li>消息标题:{{$route.query.title}}</li>
    </ul>
    </template>
    
    <script>
    export default {
      name: "Detail"
    }
    </script>
    

    小结
    1.传递参数

    <!-- 跳转并携带query参数,to的字符串写法-->
    <router-link :to=" /home/message/detail?id=666&title=你好">跳转</router-link>
    <!--跳转并携带query参数,to的对象写法-->
    <router-link
    :to="{
    	path:'/home/message/detail',
    	query:{
    		id:666,
    		title:'你好'
    	}"
    }>
    跳转
    </router-link>
    

    2.接收参数

    $route.query.id
    $route.query.title
    

    命名路由

    命名路由就是给路由起名字,可以简化代码,增加 name 属性即可。修改 index.js,给 Detail 增加 name 属性:
    在这里插入图片描述
    在 Message 跳转 Detail 时,代码可以简化为:

    <router-link :to="{
              name:'xiangqing',
              query:{
                id:m.id,
                title:m.title
              }
            }">
    

    index.js 中给 about 增加 name 属性
    在这里插入图片描述
    App.vue 中

    <!--          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>-->
    <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
    

    路由的params参数

    首先需要配置 index.js,使用占位符 params 参数

    export default new VueRouter({
        routes: [
            {......},
            {
                path: '/home',
                component: Home,
                children: [
                    {......},
                    {
                        path: 'message',
                        component: Message,
                        children: [
                            {
                                name:'xiangqing',
                                path: 'detail/:id/:title',
                                component: Detail
                            }
                        ]
                    }
                ]
            },
        ]
    })
    

    Message.vue 中传值,使用字符串写法:

    <!--跳转路由并携带params参数,to的字符串写法-->
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
    

    或者使用对象写法

    特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

    <!--跳转路由并携带params参数,to的对象写法-->
            <router-link :to="{
              name:'xiangqing',
              params:{
                id:m.id,
                title:m.title
              }
            }">
              {{ m.title }}
            </router-link>
    

    Detail 中取值

      <li>消息编号:{{$route.params.id}}</li>
      <li>消息标题:{{$route.params.title}}</li>
    

    点击消息002时:
    在这里插入图片描述

    props配置

    我们关注一个问题,在 Detail 中,我们接收参数时使用 $route.params.id$route.params.title,如果参数很多,会重复写很多次 $route.params.xxx,为了解决这个问题,就用到了 props 配置

    修改 index.js,哪里接收参数就在哪里配置

    第一种写法

    children: [
    	{
    		name:'xiangqing',
            path: 'detail/:id/:title',
            component: Detail,
            //props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。
            props:{
            	a:1,
                b:"hello"
            }
        }
    ]
    

    接收时使用 props 接收,使用插值语法读出来即可

    <template>
    <ul>
      <li>{{a}}{{b}}</li>
    </ul>
    </template>
    
    <script>
    export default {
      name: "Detail",
      props:['a','b']
    }
    </script>
    

    第二种写法

    修改 index.js

    children: [
    	{
    		name:'xiangqing',
            path: 'detail/:id/:title',
            component: Detail,
    		//props的第二种写法,值为布尔值
    		//若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
            props:true
        }
    ]
    

    Detail 接收时

    <template>
    <ul>
      <li>消息编号:{{id}}</li>
      <li>消息标题:{{title}}</li>
    </ul>
    </template>
    
    <script>
    export default {
      name: "Detail",
      props:["id","title"]
    }
    </script>
    

    第三种写法

    第二种写法只适合 params 传参。我们看下第三种写法适合 query。修改 index.js

    children: [
    	{
    		name:'xiangqing',
            path: 'detail/',
            component: Detail,
    		//props的第三种写法,值为函数
            props($route){
               return {id:$route.query.id,title:$route.query.title}
            }
            //或简写为结构赋值
            props({query}){
            	return {id:query.id,title:query.title}
            }
            //或接着结构赋值
            props({query: {id, title}}) {
            	return {id, title}
            }
        }
    ]
    

    Message.vue 中使用 query 传参

    <router-link :to="{
              name:'xiangqing',
              query:{
                id:m.id,
                title:m.title
              }
            }">
              {{ m.title }}
    </router-link>
    

    Detail 中接收时仍是同上面一样

    <template>
    <ul>
      <li>消息编号:{{id}}</li>
      <li>消息标题:{{title}}</li>
    </ul>
    </template>
    
    <script>
    export default {
      name: "Detail",
      props:["id","title"]
    }
    </script>
    

    小结:路由的props配置
    作用:让路由组件更方便的收到参数

    {
    	name : 'xiangqing',
    	path : 'detail/:id',
    	component: Detail,
    	//第一种写法: props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
    	//props:{a: 900}
    	//第二种写法: props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
    	// props :true
    	//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
    	props(route){
    		return {
    			id : route.query.id,
    			title:route.query.title
    		}
    	}
    }
    

    下一节:Vue 编程式路由导航

    展开全文
  • 路由传参不能直接一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail = () => { // ...

    具体代码如下所示:

    场景:

    <div @click='toDetail'>查看详情</div>
    

    路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象

    const router = useRouter()
    
    const toDetail = () => {
    	// 我使用的是Vue3,router要从useRouter获取
    	router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } })
    }
    

    接收路由参数

    1. Vue3接收

    import { useRoute } from "vue-router";
    
    setup() {
    	const route = useRoute()
    	const data = JSON.parse(route.params.list)
    }
    

    2. Vue2接收

    let data = this.$route.params.list
    data = JSON.parse(data)
    
    展开全文
  • 前言vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一...

    这篇文章主要给大家介绍了关于vue中路由参数传递遇到的坑的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

    前言

    vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转

    通过编程导航进行路由跳转

    本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

    首先我的路由的定义{

    path: '/b',

    name: 'B',

    component: resolve => require(['../pages/B.vue'], resolve)

    }

    我从A组件跳转到B组件,并通过路由信息对象传递一些参数this.$router.push({

    path: '/b',

    params: {

    paramA: 'a'

    },

    query:{

    paramB: 'b'

    }

    })

    在B组件中获取参数this.$route.query.paramB //b

    this.$route.params.paramA //undefined

    通过路由的params对象传递过来的参数paramB始终是undefined,始终找不到原因。通过查阅资料,终于找到原因,那是因为路由的params对象使用,必须要通过路由名来调用路由,而不同通过path来调用,而query对象则没有这个要求。

    所以我们修改下代码:this.$router.push({

    name: 'B',

    params: {

    paramA: 'a'

    },

    query:{

    paramB: 'b'

    }

    })

    将path参数换成对应的路由名称就可以了,这个时候获取参数就一切正常了。this.$route.query.paramB //b

    this.$route.params.paramA //a

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    在微信小程序中如何使用audio组件

    在微信小程序中如何使用video组件播放视频

    在微信小程序中如何实现下载进度条

    在javaScript中如何使用手机号码校验工具类PhoneUtils

    展开全文
  • VUE3路由传参数

    千次阅读 2021-08-23 22:26:07
    字符串传参数: 通过<router-link>的to顺序传递参数 俩种方式: 1、查询字符串 2、Rest风格传参数 ...字符串形式: ...参数名=参数值&参数名=参数值" ...使用路由对象vm.$route.query获取参数信息 路由对
  • vue 路由跳转携带参数

    2022-06-29 10:38:40
    vue 路由跳转携带参数的方式:一、 方式跳转,1. 携带query参数,2. 携带params参数,3.将参数转换为props属性;二、编程方式跳转路由
  • 路由传递参数 1、通过<router-link> 标签中的to传参基本语法: <router-link :to="{name:xxx, params: {key:value...params:要参数,它是对象形式,在对象里可以传递多个值。 具体实例如下:(1...
  • Vue配置路由参数

    2022-06-12 15:43:59
    vue路由参数
  • VueRouter中对象$route中的params,query使用
  • Vue 路由传递参数 3种方法

    万次阅读 2018-07-16 16:17:33
    一、用name传递参数 用name传值并显示在模板里:在路由文件src/router/index.js里配置name属性。 1234567routes: [ { path: '/Message', name: 'Message', component: resolve =&gt; require(['../...
  • Vue - 路由传递参数

    千次阅读 2017-07-25 18:25:00
    Vue 2.0 路由传递参数 Vue 路由传递参数 有两种方式: 一、用name传递参数  两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性。 1 2 3 4 5 6 7 ...
  • vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转1. router-link:to="{path: 'yourPath',params: {name: 'name',dataObj: data},query: {name: 'name',dataObj: ...
  • vue-router中params对象形式传参问题

    千次阅读 2021-12-07 15:41:42
    1.params跳转传递参数 对象中必须是name不能是path(name需要在路由中配置) ...这种形式必须params参数,不的话url会出现问题。 url问题 params可选 这中形式表示params参数可不。 ...
  • vue路由传参页面刷新后参数类型改变
  • 大家好,在上一篇系列文章里「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上),我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容。...
  • 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const router = new VueRouter({ routes: [{ path: '/about/:id', component: User ...
  • 主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 1、query传参 在路由后直接拼接即可,第一个参数使用?连接,后续参数使用&连接 参数取值使用$route.params....传递参数时,路由为字符串时直接/key/key形式拼接,路由对象形式时,需使用路由的name的配置。 ...
  • 路由传参的两种方式与props的三种用法;
  • Vue路由params、query参数丢失解决

    千次阅读 热门讨论 2021-03-03 09:06:28
    vue中路由传参有两种形式:1.params;2.query 解决办法:sessionStorage或者localStorage 两者的区别:localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面,通俗点页面一和页面...
  • 主要介绍了vue动态路由配置,vue路由传参的方式,文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
  • Vue通过query获取路由参数

    万次阅读 2019-05-09 09:00:12
    上一期讲了如果创建一个路由对象以及使用,现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为name=zhangsan&job=teacher 使用 this.$route.query 来获取路由参数 现在就是利用query...
  • vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现...
  • Vue路由传参

    千次阅读 2021-12-13 18:39:26
    Vue路由传参
  • vue路由传参【vue路由原理、区别】

    千次阅读 2022-04-25 08:57:23
    vue路由传值主要通过 query 和 params 来实现 方法1、query query传参就是在url地址后面拼接 ?参数名=参数值 优点:通用性比较好,刷新数据不会丢失 例如 rourer-link to=”/goods?id=1001” this.$router.push({...
  • Vue路由的跳转、传参问题
  • vue路由跳转以及路由传参&接收

    千次阅读 2022-03-29 12:39:44
    路由跳转 1.声明式路由跳转 (不带参数) 通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签 注意:router-link中链接如果是’/‘开始就是从...params传参数 (类似post) 路由配置 path

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,722
精华内容 4,688
关键字:

vue路由传对象形式参数