vue路由的传参有几种方法,vue路由组件传值
本文主要介绍Vue路由组件传输的八种方式。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
在开发单页面应用时，我们有时需要输入某条路线，根据参数从服务器获取数据。然后，我们必须首先获取路由所传输的参数，从而完成服务器请求。因此，我们需要了解几种路由参数的方法。以下方式同vue-router@4。
编程式路由传参
除了使用router-link创建一个标签来定义导航链接，我们还可以使用router的实例方法，通过编写代码来实现这一点。
1. 通过 params 传递
路由配置
该路径由冒号表示：
常量路由=[
//动态段以冒号开头
{路径：详细信息/:id ，名称：详细信息，组件：详细信息}，
]
router.push()方法的参数可以是字符串路径，也可以是描述地址的对象。
const Home={
模板： div @ click= to Details to Details/div ，
方法：{
toDetails() {
//字符串路径
这个。$router.push(/details/001 )
//带有路径的对象
这个。$ router . push({ path:/details/001 })
//命名路由。配置路由时，名称字段是必需的。
这个。$router.push({ name: details ，params: { id: 001 } })
}
}
}
请注意，如果提供了路径，参数将被忽略：
//`params 不能与` path 一起使用。
router.push({ path: /details ，params:{ id: 001 } })///-/details
获取组件数据
当一个路由被匹配时，它的params值将以如下形式公开。每个组件中的route.params。
常量详细信息={
template: div details { { $ route . params . id } }/div ，
已创建(){
//侦听路由更改
这个。$watch(
()=这个。$route.params，
(toParams，previousParams)={
//响应路线更改.
}
)
},
}
2. 通过 query 传递
这种情况下，查询传递的参数会显示在url之后，比如：/details/001？种类=汽车.
路由配置
使用查询时，以下三种方式是可行的：
这个。$router.push(/details/001？种类=汽车’)
这个。$ router . push({ path:/details/001 ，查询：{ kind: car }})
这个。$router.push({ name: details ，params: { id: 001 }，query: { kind: car })
组件获取数据
组件是通过$route.query获得的：
常量详细信息={
template: div details { { $ route . query . kind } }/div ，
已创建(){
//侦听路由更改
这个。$watch(
()=这个。$route.query，
(toParams，previousParams)={
//响应路线更改.
}
)
},
}
为了响应同一个组件中参数的变化，您可以简单地观察watch $route对象上的任何属性，在这个场景中就是$route.query。
3. 通过 hash 传递
这样url路径就有了哈希，比如：/details/001#car。
路由配置
使用hash时，以下三种方法是可行的(同查询):
这个。$router.push(/details/001#car )
这个。$ router . push({ path:/details/001 ，hash: #car})
这个。$router.push({ name: details ，params: { id: 001 }，hash: car})
组件获取数据
组件通过$route.hash.slice(1)获得：
常量详细信息={
template: div details { { $ route . hash . slice(1)} }/div ，
}
通过 props 进行传递
在组件中使用$route将与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的URL。虽然这不一定是坏事，但是我们可以通过道具配置来去除这种行为。
Props用于以解耦的方式传递参数，主要在路由配置中。
1.布尔模式
当props设置为true时，route.params将被设置为组件的props。
例如，以下代码通过$route获取动态字段id:
const User={
模板： div user { { $ route . params . id } }/div
}
const routes=[{ path: /user/:id ，component: User }]
用props的形式替换上面的代码，如下：
const User={
Props: [id]，//通过组件中的Props获取id
模板：“divUser {{ id }}/div”
}
//在路由配置中，添加props字段，并将值设置为true。
const routes=[{ path: /user/:id ，component: User，props: true }]
注意：对于具有命名视图的路线，您必须为每个命名视图定义属性配置：
常量路由=[
{
路径：“/user/:id”，
组件：{默认：用户，侧栏：侧栏}，
//为用户提供道具
props: { default: true，sidebar: false }
}
]
2.对象模式
当道具是一个对象时，它将被设置为组件道具。道具在静止的时候是有用的。
路由配置
常量路由=[
{
路径：“/hello”，
组件：你好，
道具：{ name:世界 }
}
]
从组件获取数据。
const Hello={
道具：{
名称：{
类型：字符串，
默认值：“Vue”
}
},
模板：“div Hello {{ name }}/div”
}
Hello/组件默认显示hellowue，但是路由是用props对象配置的。当路由跳转到/hello时，会显示传递的名称，页面显示为Hello World。
3.功能模式
你可以创建一个返回道具的函数。这允许您将参数转换为其他类型，将静态值与基于路径的值相结合，等等。
路由配置
使用函数模式时，返回props的函数接受的参数是路由记录route。
//创建一个返回属性的函数
const dynamicPropsFn=(route)={
return { name: route.query.say ！}
}
常量路由=[
{
路径：“/hello”，
组件：你好，
道具：dynamicPropsFn
}
]
组件获取数据
当网址为/hello？当say=World时，{name: World！将作为道具传递给Hello组件。
const Hello={
道具：{
名称：{
类型：字符串，
默认值：“Vue”
}
},
模板：“div Hello {{ name }}/div”
}
页面将呈现为：
注意：请尽量保持props函数的无状态，因为它只有在路线改变时才会起作用。如果您需要状态来定义props，请使用包装器组件，以便vue可以对状态变化做出反应。
其他方式
1.穿过Vuex
1.存储存储状态；
2.组件改变了存储中的状态；
3.b组件从商店获得。
2.通过前端本地存储等。
1.本地存储；
2.会话存储；
3.IndexedDB
4.Web SQL
5.饼干.
以上就是本文关于Vue路由组件传输的八种方式。有关Vue路由组件传输的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。