vue路由的get传值详解

路由跳转传值一种为路由的动态传值，一种为路由的get传值,此篇来介绍路由的get传值。

一.路由get传值

配置路由不需要像动态传值一样配置值， 类似于get路径传值
index.js 路由节点

// 配置的路由节点
import Home from '../views/Home.vue'
export default[
  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
]

主界面 App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link> 
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
  }
</script>

先开始路由没有传值显示的界面：

• App.vue 静态传值

获取路由路径get传值 this.$route.query

<template>
  <div id="app">
    //静态传值
    <router-link to="/?id=1000&name=abcd">Home</router-link> //直接是?+其他
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
   mounted(){
    
    
    //获取路由路径get传值
     console.log(this.$route.query);
  },
  }
</script>

界面显示结果为：

输出的结果：

• App.vue 动态传值

<template>
  <div id="app">
    //动态的传值
    //es6模板方式来写
    <router-link :to="`/?id=${id}&name=${name}`">Home</router-link>
    //另外一种方式
    <router-link :to="{path:'/',query:{'id':id,'name':name}}">Home</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
  data(){
    
    
    return{
    
    
      id:123456,
      name:'jiang',
    }
  },
  mounted(){
    
    
    //获取路由路径get传值
     console.log(this.$route.query);
  },
  }
</script>

界面结果展示：

vue 动态传值链接：
https://blog.csdn.net/weixin_47863547/article/details/119185414