Query parameter passing and dynamic routing parameter passing in Vue

query parameter

2种传参:
1、<router-link to="/xx?name=karen&pwd=123">go</router-link>
2、this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})

//Get data in the component that matches the route:
mounted(){let queryObj=this.$route.query}

Dynamic routing parameters

Design:
const router=new VueRouter({      routes:[          {path:"/home/:id",component:()=>import("./home.vue")},          {path:"/about",component :()=>import("./about.vue")}]  })  2 kinds of parameter passing:  <router-link to="/home/123">go</router-link>  this.$router.push ({path:"/home",params:{id:123}}) // If path is provided, params will be ignored, which is not the case for the query in the above example. Instead, use the following example, you need to provide the name of the route or hand-write a complete path with parameters: //Get data in the component that matches the route: mounted(){let paramsObj=this.$route.params}




 




 

the case

Routing code:

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/test1/:id', //动态路由
    name: 'test1',
    component: () => import('../views/test1View.vue')
  },
  {
    path:'/test2',
    name:'test2',
    component:()=>import('../views/test2View.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

Main interface code:

<template>
  <div>
    <h1>这是主页面</h1>
    <div class="test1"> 
      <h2>动态路由传参</h2>
      <router-link to="/test1/999&111">1、跳转test1界面</router-link>
      <br />
      <router-link :to="{path:'/test1/666'}">2、跳转test1界面</router-link>
      <br />
      <button @click="link1(555)">3、跳转test1界面</button>
    </div>

    <div class="test2">
      <h2>传参</h2>
      <router-link to="/test2?id=123456&pwd=abc123">1、跳转test2界面</router-link>
      <br />
      <router-link :to="{path:'/test2',query:{a:1000,b:200}}">2、跳转test2界面</router-link>
      <br />
      <button @click="link2(730,3502)">3、跳转test2界面</button>
      <button @click="link3(187,7414)">3、跳转test2界面</button>
    </div>
  </div>
</template>
 
<script>

export default {
  name: 'HomeView',
  methods: {
    link1(arg) {
      this.$router.push(`/test1/${arg}`)
    },
    link2(arg1,arg2) {
      this.$router.push(`/test2?a=${arg1}&b=${arg2}`)
    },
    link3(arg1,arg2) {
      this.$router.push({path:'/test2',query:{a:arg1,b:arg2}})
    }
  }
}
</script>

<style lang="css" scoped>
.test1 {
  background-color: antiquewhite;
}

.test2 {
  background-color: rgb(167, 230, 164);
}
</style>

test1 interface code

<template>
  <div>
    <h2>这是test1界面</h2>
    <h3>这是动态路由传值(网址栏上会显示)：{
    
    {msg}}</h3>
  </div>
</template>

<script>
export default {
  name: 'VueTest1View',
  

  data() {
    return {
      msg:""
    };
  },

  mounted() {
    console.log(this.$route.params.id) //params去接收
    this.msg=this.$route.params
  },

  methods: {
    
  },
};
</script>

<style lang="sass" scoped>

</style>

test2 interface code

<template>
    <div>
        <h2>这是test2界面</h2>
        <h3>这是主界面传过来的值：{
    
    {msg}}</h3>
    </div>
</template>

<script>
export default {
    name: 'VueTst2View',

    data() {
        return {
            msg:""
        };
    },

    mounted() {
        console.log(this.$route)
        this.msg=this.$route.query //将传入的值保存起来
    },

    methods: {
        
    },
};
</script>

<style lang="sass" scoped>

</style>

Renderings:

The result obtained  by clicking each link of the dynamic routing parameter transfer is

1、

2、

 

3、

 

The results obtained   by clicking each link of the query parameter transfer are as follows:

1、

2、

 

3、

 

4、