Vue路由组件传递参数的8种方式_0

',methods:{toDetails(){//字符串路径this.$router.push('/details/001')//Objectwithpaththis.$router.push({path:'/details/001'})//命名路由，在配置路由时，name字段是必填的this.$router.push({name:'details',params:{id:'001'}})}}}请注意，如果提供了路径，params将被忽略：//`params`不能与`path`一起使用router.push({path:'/details',params:{id:'001'}})//->/details组件获取数据当路由被匹配时，其params的值将以this.$route.params的形式暴露在每个组件中。constDetails={template:'',created(){//监听路由变化this.$watch(()=>this.$route.params,(toParams,previousParams)=>{//响应路由变化...})},}2.通过query传递这种情况下，query传递的参数（queryparameters）会显示在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'}})component获取数据component通过获取$route.query:constDetails={template:'',created(){//监控路由变化this.$watch(()=>this.$route.query,(toParams,previousParams)=>{//响应路由变化...})},}要响应同一组件中的参数变化，您可以简单地观察$route对象上的任何属性，在这种情况下，$route.query。3、通过该方法，在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:'',}通过props在组件中使用$route匹配Routing是紧密耦合的，这限制了组件的灵活性，因为它只能用于特定的URL。虽然这不一定是坏事，但我们可以通过props配置来撤销这种行为。使用props以解耦的方式传递参数，主要是在路由配置中。布尔模式当props设置为true时，route.params将被设置为组件的props。例如下面的代码通过$route获取动态字段id：constUser={template:''}constroutes=[{path:'/user/:id',component:User}]将上面的代码换成props的形式，如下：constUser={props:['id'],//通过组件模板中的props获取id:''}//在路由配置中，添加props字段并设置值为trueconstroutes=[{path:'/user/:id',component:User,props:true}]注意：对于具有命名视图的路由，您必须为每个命名视图定义props配置：constroutes=[{path:'/user/:id',components:{default:User,sidebar:Sidebar},//ProvidepropsforUserprops:{default:true,sidebar:false}}]objectpattern当props是一个对象时，它会按原样设置为组件props。当道具是静态的时候很有用。路由配置constroutes=[{path:'/hello',component:Hello,props:{name:'World'}}]从组件获取数据constHello={props:{name:{type:String,default:'Vue'}},template:''组件默认显示HelloVue，但是路由配置了props对象。当路由跳转到/hello时，会显示传入的名称，页面会显示为HelloWorld。函数模式可以创建一个返回props的函数。这允许您将参数转换为其他类型，将静态值与基于路由的值结合起来等等。当路由配置使用function方式时，function返回props接受的参数为路由记录路由。//创建一个返回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}}

'}此时页面将被渲染：注意：请尝试尽可能保持道具功能无状态，因为它只会在路线改变时起作用。如果您需要状态来定义道具，请使用包装器组件，以便vue可以对状态变化做出反应。其他通过Vuex的方式1.store存储state；2、A组件改变store中的state；3.B组件从商店中获取它。通过前端本地存储等1.LocalStorage；2.会话存储；3.索引数据库；4.网络查询；5.饼干。