This time I will bring you a detailed explanation of the steps for passing parameters in vue query. What are the precautions for passing parameters in vue query? The following is a practical case, let’s take a look.
I am learning Vue recently. This article introduces the use of vue params and query parameters. Share it with everyone and leave a note for yourself Declarative:export default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A') }, { path: '/B/:name/:age', name: 'B', component: require('../components/B') } ] })
to component B in routing
A component, bind a @clickevent, jump to B component to pass parameters, use params
<template> <p> <!---只允许有一个最外层标签 !--> <p> <p>{{message}}</p> <p @click="toBFun">跳转B组件啊啊</p> <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>--> </p> </p> </template> <script> export default { data: function () { return { message: 'vue好帅啊!' } }, methods: { toBFun: function(){ this.$router.push({name:'B',params:{name:'xy',age:22}}); } } } </script> <style> </style>
Transfer value and address change
Also in the router/index.js routing file, there are two unchanged parameters name, age{ path: '/B/:name/:age', name: 'B', component: require('../components/B') }
this.$router.push({name:'B',params:{name:'xy',age:22}});
this.$router.push({name:'B',query:{name:'xy',age:22}});
params: this.$route.params.name;
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
<router-link :to="{path:'/B/123'}"> 跳转B组件</router-link> </p>
{ path: '/B/:name', name: 'B', component: require('../components/B') }
this.$route.params.name
The above is the detailed content of Detailed explanation of vue+query passing parameters. For more information, please follow other related articles on the PHP Chinese website!