[JavaScript知识库] vue路由的get传值详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue路由的get传值详解 -> 正文阅读

[JavaScript知识库]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>