vue-路由器传输参数分为两类

编程导航路由器。推送声明性导航路由器-链接编程导航路由器。推送

编程导航传递的参数有两种类型：字符串和对象。

字符串

字符串的方式是直接以字符串的方式跳转路由地址，非常简单但不能传递参数：

这个。$ router . push(' home ')；

目标

要传递的参数主要以对象的形式编写，分为命名路由和查询参数两种方式。下面说明这两种方式的用法和注意事项。

命名路线

命名路线的前提是命名路线注册的路线，例如：

命名的路由参数需要由params传递，因此必须注意params不是查询。

当目标页面收到传递参数时，使用Params

特别注意：如果在目标页面上刷新命名路由传递的参数，它们会出错

使用方法如下：

这个的代码。$ router.push ({name:' news '，params: { userid3360 123 } })如下：

template div class=' hello ' h1 { { msg } }/h1 button @ click=' routerTo '单击此处转到新闻页/button/div/templatescriptexport default { name : ' hello world }，data () { return { msg: '欢迎使用您的Vue.js App' } }，methods:{ routerTo(){ this。$router.push({ name: 'news '，params 3360 { userid : 123 } })；} }}/scriptstyle/style接受传递的参数：template div这是新闻页。转换参数是{{this。$ route . params . userid } }/div/模板脚本/脚本运行如下：

查询参数

事实上，查询参数与路由地址后的传统url参数一致。查询用于传输参数，必须与path匹配才能传输参数，而不是名称。查询用于目标页面接收和传输参数。

注意：参数与名称配对，查询与路径配对

使用方法如下：

这个。$router.push({ path: '/news '，query : { userid : 123 } })；代码如下：template div class=' hello ' h1 { { msg } }/h1 button @ click=' router to '单击此处转到news age/button/div/templatescript export default { name : ' hello world }，data () { return { msg: '欢迎使用您的Vue.js App' } }，methods:{ routerTo(){ this。$router.push({ path: '/news '，query : { userid : 123 } })；} }}/scriptstyle/style接收以下参数：template div这是新闻页。转换参数是{{this。$ route . query . userid } }/div/模板脚本/脚本运行如下：

声明式导航

声明式导航和编程式导航是一样的，这里就不多介绍了。我将给出一些与编程导航相比需要理解的例子。

例子如下：

字符串

路由器链接到='新闻'单击以新闻页面/路由器链接命名路由

router-link : to=' { name : ' news '，params: { userid33601111 } } '单击到新闻页面/router-link运行如下：

查询参数

router-link : to=' { path : '/news '，query: {userid: 1111}} '单击以新闻页面/router-link运行如下：

最后总结一下：

路由传输参数与传统传输参数相同。命名路由类似于表单提交，查询是url传输。在vue项目中，这两个传动参数基本可以掌握，满足大部分应用。最后，总结如下：

1.带有参数的命名路由，刷新页面参数将丢失

2.查询参数与查询匹配，刷新后的页面数据不会丢失

3.接受参数并使用它。$router后跟匹配路由的名称，以获取参数值

摘要

以上是边肖介绍的vue-router传输参数的几种方式和例子的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！