Vue兄弟组件间传值之 get传值

太过爱你忘了你带给我的痛 2022-12-23 00:34 207阅读 0赞

## 第一步：在新建的views目录下创建如下所示的两个组件： ##

*  News.vue

<template>
      <div>
        <h2>{
       {msg}}</h2><br>
        <ul>
          <li v-for="(item ,index) in titles" :key="index">
            <router-link :to="'/details?nid='+index">{
       {index}}-{
       {item}}</router-link>
          </li>
        </ul>
      </div>
    </template>
    <script> export default { data() { return { msg: 'News头部', titles:['aaaa','bbbb','cccc','dddd'] } } } </script>

*  Details.vue

<template>
      <div>
        <h2>News Details</h2><br>
      </div>
    </template>
    <script> export default { name: "News Details", data() { return { msg: 'Details' } }, mounted(){ console.log(this.$route.query); //获取Get传值 } } </script>

## 第二步：router目录下的index.js ##

import Vue from 'vue';
    import App from './App.vue';
    
    import VueRouter from 'vue-router';
    Vue.use(VueRouter);
    
    import News from  './views/News';
    import Details from  './views/Details';
    
    const routes = [
      {  path: '/news', component: News },
      {  path: '/details', component: Details }, 
      {  path: '*', redirect: '/news' }   /*默认跳转路由*/
    ]
    const router = new VueRouter({ 
      routes
    })
    new Vue({ 
      el: '#app',
      router,
      render: h => h(App)
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 [vue] 父子组件间传值

境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template> <div> <a-butt...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 76 阅读

相关 Vue兄弟组件间传值之 get传值

第一步：在新建的views目录下创建如下所示的两个组件： News.vue <template> <div> <h2>{

太过爱你忘了你带给我的痛/ 2022年12月23日 00:34/ 0 赞/ 208 阅读

相关 Vue兄弟组件间传值之事件总线

第一步：在src/utils目录下创建文件bus.js // 专门用来传递传递消息 import Vue from 'vue' expo

心已赠人/ 2022年12月22日 12:28/ 0 赞/ 186 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 307 阅读

相关 Vue兄弟之间传值

转载自 [https://www.jianshu.com/p/661634c1af9b][https_www.jianshu.com_p_661634c1af9b] ，感谢作者

淡淡的烟草味﹌/ 2022年12月04日 07:54/ 0 赞/ 195 阅读

相关 vue父子组件间传值

子组件 <template> <div class="confirm_button"> <el-button type="primar

你的名字/ 2022年10月02日 11:50/ 0 赞/ 293 阅读

相关 VUE：兄弟组件间传参

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1、定义一个中间 eventBus.js ，只有

刺骨的言语ヽ痛彻心扉/ 2022年03月26日 06:58/ 0 赞/ 760 阅读

相关整理vue组件间传值方法（父子组件、兄弟组件）

重新整理记录一下vue组件间传值的方法，包括父传子、子传父、兄弟间互传。 1.父组件向子组件传值父组件通过自定义属性向子组件传值 <Children

﹏ヽ暗。殇╰゛Y/ 2021年11月01日 16:24/ 0 赞/ 356 阅读

相关 vue 兄弟组件传值

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现

た入场券/ 2021年09月04日 06:55/ 0 赞/ 426 阅读

相关 vue的组件间传值

父组件向子组件传值 1.父组件中引入子组件，直接使用v-bind在子组件标签上传值 <template> <div> <hom

系统管理员/ 2021年09月02日 05:12/ 0 赞/ 418 阅读