vue router怎么跳转后怎么获取参数

首先在appvue里面有这么一段 然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了

在实现页面跳转时，需要携带参数。在这里使用的是vue 中的路由 Vue Router ,使用前先安装依赖配置项目环境，具体 *** 作参考 windos环境安装Vue及配置环境

router/indexjs路由的配置文件中需要写 name ,否则获取不到信息会提示 undefined

传参组件：test1vue

接收参数组件：secondvue

传参组件：test2vue

接收参数组件：secondvue

replace和push区别：

routerpush(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

routerreplace(location) ，replace 属性（默认值: false），它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

注意：获取路由上面的参数，用的是$route，后面没有r

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失。

两者都可以传递参数，区别是什么？

query 传参配置的是path，而params传参配置的是name，在params中配置path无效

query在路由配置不需要设置参数，而params必须设置

query传递的参数会显示在地址栏中

params传参刷新会无效，但是query会保存传递过来的值，刷新不变

/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params

/dataid=1 /dataid=2 这里的 id 叫 query

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。

这句话怎么理解呢？看下边：

如果你要使用params传参，那么你的路由页面indexjs必须带上参数，如下

如果你要使用query传参，那么你的路由页面indexjs必须带上参数，如下

这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。

要是想获取参数值：各自的获取方法是：

query和params分别是：this routeparamsid

顺便说一些参数是多个的情况

params传参，如果路由indexjs如下：

那么跳转写法：this$routerpush({name:'detail',params:{id:123,name:'lisi'}})

效果： >

1 可以通过encodeURIComponent方法进行编码处理后获取含有特殊字符的参数。

2 因为特殊字符在URL中需要进行编码处理，否则会出现意外的结果或错误的解析。

3 例如，如果获取参数name中含有特殊字符的值，可以使用vuerouterquery获取参数后再使用decodeURIComponent方法进行解码处理，代码示例如下：const name = this$routequeryname // 获取参数

const decodedName = decodeURIComponent(name) // 解码处理含有特殊字符的值这样就可以正确地获取含有特殊字符的参数值了。

Vue Router params 参数接收为空-简书

path 和 params 传参,Bvue 中 this$routeparams 接收为空 Avue let this$routeparams 正常接受参数

简书2018-12-18。第一种：get方法接收值this$routequeryname，第二种：post方法this$routeparamsname （在页面刷新的时候就会消失）第三种：路由方法props:{name:{required:false,default:''}} （页面刷新不消失，可以在路由配置中设置参数）。另外： 如果在链接上设置 replace 属性，当点击时，会调用 routerreplace() 而不是 routerpush()，于是浏览器不会留下 history 记录。

方案一：

getDescribe(id) {//   直接调用$routerpush 实现携带参数的跳转

this$routerpush({

path: `/describe/${id}`,

})

方案一，需要对应路由配置如下：

{     path: '/describe/:id',

name: 'Describe',

component: Describe

}

很显然，需要在path中添加/:id来对应 $routerpush 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this$routeparamsid

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this$routerpush({          name: 'Describe',          params: {            id: id

}

})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{     path: '/describe',

name: 'Describe',

component: Describe

}

子组件中: 这样来获取参数

this$routeparamsid

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

this$routerpush({          path: '/describe',          query: {            id: id

}

})

对应路由配置：

{     path: '/describe',

name: 'Describe',

component: Describe

}

对应子组件: 这样来获取参数

this$routequeryid

这里要特别注意 在子组件中 获取参数的时候是$routeparams 而不是

$router 这很重要~~~

以上就是关于vue router怎么跳转后怎么获取参数全部的内容，包括:vue router怎么跳转后怎么获取参数、Vue Router路由中 的$route.params和$route.query传参的区别和使用示例、vue 路由四种方式 (带参数)跳转等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！