精华内容
下载资源
问答
  • 2021-09-27 15:16:29

    vue携带参数传参的方法可以参考以下文章
    vue路由跳转和传参的方式
    现在我们以

    this.$router.push({name: 'index', params: {id: '1'}})
    this.$router.push({name: 'index', query: {id: '1'}})
    

    来举例说明query和params的区别:
    vue路由传参共有两种方法,分别是通过params传参和通过query传参,两者区别如下:
    1.用params传参的时候
    页面跳转之后的页面路径为http://localhost:8080/#/index
    这种传参方法:
    1.用户看不到具体的参数值,相对安全
    2.当页面刷新的时候传递的参数id在该页面中就不存在了。
    3.params传参的时候,只能用name引入路由,不能使用path引入
    2.用query传参的时候
    页面跳转之后的页面路径http://localhost:8080/#/index?id=1
    这种传参方法:
    1.传递的参数值会暴露在页面路径中,不安全
    2.当页面刷新的时候,传递的参数不会消失
    3.query传参的时候,可以同时使用name和path引入路由

    更多相关内容
  • vue 路由跳转携带参数

    2022-06-29 10:38:40
    vue 路由跳转携带参数的方式:一、 方式跳转,1. 携带query参数,2. 携带params参数,3.将参数转换为props属性;二、编程方式跳转路由

    一、<router-link> 方式跳转

    1. 携带query参数

     <router-link to="/detail?id=001&title=消息001"> 消息001</router-link>

    <router-link :to="{

            name: 'detail',

            path: '/detail', 

            query: {

                    id: '001',

                    title: '消息001'

            }

    }"

    注:此种方式不需要动路由配置,to属性对象形式中name和path二选一即可 。

    此时浏览器地址栏地址为:http://localhost:8080/detail?id=001&title=消息001 

    接收参数为:

    $route.query.xxx

    2. 携带params参数 

    <router-link :to="`/detail/${id}/${title}`"> {{ title }} </router-link> 

    <router-link :to="{

            name: 'detail',

            path: '/detail', 

            params: {

                    id: '001',

                    title: '消息001'

            }

    }"

    注意:此种方式需要修改路由配置,且to的对象形式中只能用name匹配路由

    {

           name: 'detail',

            path: '/detail/:id/:title'

            component: Detail

    此时浏览器地址栏地址为:http://localhost:8080/detail/001/消息001 

    接收参数为:

    $route.params.xxx

    3.将参数转换为props属性

     我们可以通过配置路由时的props属性,将params/query携带的参数,在组件中用props属性来接收,这样用时可以直接使用,就不需要$route.params.xxx/$route.query.xxx的形式了

    配置方式:

    {
        name:'detail',
        path:'/detail',
        component: Detail,
    
        /**
        方式一,值为对象,对象中的key-value会以props的形式传递给Detail组件,
        但是传递的值都是一样的,不推荐
        props: {
             id: '123',
             title: '消息001',
        },
        **/
        
    
        /**
        方式二,值为布尔值,若布尔值为真,就会把该组件收到的所有params参数,以props的形式传式传递给Detail组件, 但之这种方式只适用于params参数
        props: true,
        **/
    
        /**
        方式三,值为函数,内置传参$route,可以使用结构赋值形式
        **/
        props({query}){
            return {id: query.id, title: query.title}
        },

    还学到了一种结构再结构的形式

    props({ query: { id, title } }) {

            return { id, title }

    二、编程方式跳转路由

    通过编写代码的方式使路由发生跳转,跳转方式有两种,一种是push,一种是replace,他们都是$router上的函数(存在于VueRouter原型上)。此时携带参数方式为:

    this.$router.push({
        name:  'detail',
        params: {
            id: xxx,
            title: xxx
        },
        /**
        query: {
            id: xxx,
            title: xxx
        }
        **/
    })
    
    this.$router.replace({
        name:  'detail',
        params: {
            id: xxx,
            title: xxx
        },
        /**
        query: {
            id: xxx,
            title: xxx
        }
        **/
    })          

    注意:不论何种方式跳转,想要在标签中接收到不同的params就需要在路由配置时用/:占位,不然只能接收到第一次打开时带过来的参数。


    写在最后:

    如果有建议或意见,欢迎评论。如果有小伙伴发现文中存在错误,也欢迎在评论区指出~

    展开全文
  • 路由跳转携带参数 this.$router.push( { path:'/home', query:{ val:123 } } ) 在另一个页面接收 this.$route.query.val 跳转时使用this.$router ,接收使用this.$route没有r

    路由跳转携带参数

    this.$router.push(
        {
            path:'/home',
            query:{
                val:123
            }
        }
    )

    在另一个页面接收

     this.$route.query.val

    跳转时使用this.$router ,接收使用this.$route没有r

     

    展开全文
  • 1. router-link ...// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
  • 最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。 典型应用场景:列表页跳转到详情页 一、配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router...
  • vue路由跳转携带参数

    千次阅读 2018-12-10 17:10:52
    vue路由跳转携带参数 在使用this.$router.push传递参数的时候有一个坑就是不能用path,用了path后params无效,只能用name来表示路由的路径

    vue路由跳转携带参数

    1.params方式

    在这里插入图片描述
    在使用this.$router.push传递参数的时候有一个坑就是不能用path,用了path后params无效,只能用name来表示路由的路径
    其他vue中使用传来的参数使用 this.$route.params.username 取值

    2.query方式

    在这里插入图片描述
    这种方式只能用path路由

    两者区别

    上网搜索了下主要区别有两个:
    在这里插入图片描述

    展开全文
  • vue携带参数路由跳转的两种方式

    千次阅读 2022-05-13 10:05:04
    // 参数携带两种方式如下 (1) this.$router.push({ name:'orderDetail', params:{id:14} }) (2) this.$router.push({ path:'/microcosm/orderDetail', params:{id:14} }) // 获取参数 对应上面的顺序 (1) this.$...
  • VUE路由携带参数的三种方式

    千次阅读 2020-12-19 14:37:57
    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据路由携带参数的方式总结如下:路由定义示例:{name: 'list',path: '/list',component: List}1. 通过query携带代码示例如下:this.$router.push...
  • //这里使用name进行路由跳转携带参数时用params,跳转后,url上不会出现参数,刷新页面后参数会丢失 this.$router.push({ name: "page1", params: { code: this.code }, }); //接收参数时用 this.$route....
  • import { useRouter, onBeforeRouteUpdate } from 'vue-router' router.push({ name: 'files', params: { code: '1234' } }) 收 import { useRoute } from "vue-router"; const route = useRoute(); const ...
  • vue路由跳转参数

    万次阅读 2017-09-06 17:46:53
    vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link :to="{ path: 'yourPath', params: { name: 'name', dataOb
  • 方法一:router-link {{ movie_info.name }} 获取参数方法 mounted() { console.log(this.$route.query.id) }, 效果 方法二:this.$router.push() {{ movie_info.name }} itemClick(id) { console.log(id);...
  • 关于VUE路由跳转携带多个参数二次跳转参数失效问题解决 问题: 当A路由点击按钮携带参数跳转到B路由时,第一次传过来的参数有效,但是第二次传过来的参数无效,实质上参数是已经传过来了,只是未被监听到 解决方案:...
  • 简述由于需要使用到路由传递参数,所以查到一些VUE传递参数的几种方法,文章里总结了六种.具体的文档可以去官方文档上查看.但是我读下来有一个体会 : 示例有些少.描述的比较精简.以下贴出代码并有简要的概述.从代码的...
  • vue路由跳转以及参数获取

    千次阅读 2020-12-01 16:40:48
    路由跳转 query传参】 this.$router.push({ path: '/home', query: { id: '111' } }) 【query传参 ,获取参数】 const id = this.$route.query.id 【路由跳转 params传参】 this.$router.push({ name: '...
  • vue 路由之间携带参数跳转

    千次阅读 2019-05-13 10:45:08
    举个例子,从A.vue文件跳转到B.vue文件 A.vue 1、path:"/onetopic" 是router文件夹下面index.js/router.js 里面配置的路径名 this.$router.push({ path:"/onetopic", query:{ id:id } }) 2、记住是...
  • vue 路由跳转四种方式 (带参数)

    万次阅读 多人点赞 2019-01-09 19:29:39
    1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <...// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 ...
  • 路由跳转携带参数
  • vue中路由跳转参数携带与获取

    千次阅读 2020-08-10 12:03:39
    // 参数携带两种方式如下 (1) this.$router.push({ name:'orderDetail', params:{id:14} }) (2) this.$router.push({ path:'/microcosm/orderDetail', params:{id:14} }) // 获取参数 对应上面的顺序 (1) this.$...
  • 1.组件1 import {useRouter} from "vue-router";...//跳转页面携带参数 let obj = { name : "张三" } router.push ({ path:"/user", query:{ para: JSON.stringify(obj) } }); 2.组件2 接收参数 im...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,572
精华内容 2,228
关键字:

vue路由跳转携带参数