详解Vue 路由组件传参的 8 种方式
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同vue-router@4。
编程式路由传参
除了使用
1.通过params传递
路由配置
路径参数用冒号:表示。
constroutes=[
//动态段以冒号开始
{path:'details/:id',name:"details",component:Details},
]
router.push()方法的参数可以是一个字符串路径，或者一个描述地址的对象。
constHome={
template:'ToDetails 注意，如果提供了path，params会被忽略：
//`params`不能与`path`一起使用
router.push({path:'/details',params:{id:'001'}})//->/details
组件获取数据
当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来。
constDetails={
template:'Details{{$route.params.id}}',
created(){
//监听路由变化
this.$watch(
()=>this.$route.params,
(toParams,previousParams)=>{
//对路由变化做出响应...
}
)
},
}
2.通过query传递
这种情况下query（查询参数）传递的参数会显示在url后面，如：/details/001?kind=car。
路由配置
使用query时，以下三种方式都是可行的：
this.$router.push('/details/001?kind=car')
this.$router.push({path:'/details/001',query:{kind:"car"}})
this.$router.push({name:'details',params:{id:'001'},query:{kind:'car'}})
组件获取数据
组件通过$route.query获取：
constDetails={
template:'Details{{$route.query.kind}}',
created(){
//监听路由变化
this.$watch(
()=>this.$route.query,
(toParams,previousParams)=>{
//对路由变化做出响应...
}
)
},
}
要对同一个组件中参数的变化做出响应的话，你可以简单地watch$route对象上的任意属性，在这个场景中，就是$route.query。
3.通过hash传递
通过此方式，url路径中带有hash，例如：/details/001#car。
路由配置
使用hash时，以下三种方式都是可行的（同query）：
this.$router.push('/details/001#car')
this.$router.push({path:'/details/001',hash:'#car'})
this.$router.push({name:'details',params:{id:'001'},hash:'car'})
组件获取数据
组件通过$route.hash.slice(1)获取：
constDetails={
template:'Details{{$route.hash.slice(1)}}',
}
通过props进行传递
在组件中使用$route会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的URL。虽然这不一定是件坏事，但我们可以通过props配置来解除这种行为。
以解耦的方式使用props进行参数传递，主要是在路由配置中进行操作。
1.布尔模式
当props设置为true时，route.params将被设置为组件的props。
例如下面的代码是通过$route的方式获取动态字段id：
constUser={
template:'User{{$route.params.id}}'
}
constroutes=[{path:'/user/:id',component:User}]
将上面的代码替换成props的形式，如下：
constUser={
props:['id'],//组件中通过props获取id
template:'User{{id}}'
}
//路由配置中，增加props字段，并将值设置为true
constroutes=[{path:'/user/:id',component:User,props:true}]
注意：对于有命名视图的路由，你必须为每个命名视图定义props配置：
constroutes=[
{
path:'/user/:id',
components:{default:User,sidebar:Sidebar},
//为User提供props
props:{default:true,sidebar:false}
}
]
2.对象模式
当props是一个对象时，它将原样设置为组件props。当props是静态的时候很有用。
路由配置
constroutes=[
{
path:'/hello',
component:Hello,
props:{name:'World'}
}
]
组件中获取数据
constHello={
props:{
name:{
type:String,
default:'Vue'
}
},
template:'Hello{{name}}'
}
3.函数模式
可以创建一个返回props的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。
路由配置
使用函数模式时，返回props的函数接受的参数为路由记录route。
//创建一个返回props的函数
constdynamicPropsFn=(route)=>{
return{name:route.query.say+"!"}
}
constroutes=[
{
path:'/hello',
component:Hello,
props:dynamicPropsFn
}
]
组件获取数据
当URL为/hello?say=World时，将传递{name:'World!'}作为props传给Hello组件。
constHello={
props:{
name:{
type:String,
default:'Vue'
}
},
template:'Hello{{name}}'
}
此时页面将渲染：
注意：请尽可能保持props函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义props，请使用包装组件，这样vue才可以对状态变化做出反应。
其他方式
1.通过Vuex进行传递
1.store存储状态；
2.A组件更改store中的状态；
3.B组件从store中获取。
2.通过前端本地存储等方式
1.LocalStorage;
2.SessionStorage;
3.IndexedDB;
4.WebSQL;
5.Cookies。
到此这篇关于Vue路由组件传参的8种方式的文章就介绍到这了,更多相关Vue路由组件传参内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！