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

太过爱你忘了你带给我的痛 2022-12-23 00:34 227阅读 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 条评论，227人围观）

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

相关阅读

相关 Vue3兄弟组件传值（同级别组件传值Vue3）

上面使用Vue 3 自身的AP实现了兄弟组件传值，这里我们可以使用 Vue3 的setup语法糖结合第三方库mitt来实现。mitt是一个小巧且快速的TypeScript...

快来打我*/ 2024年04月22日 22:30/ 0 赞/ 85 阅读

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

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

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

相关 vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）

简介: 兄弟组件，就是同级别的组件⭐ 第一种： EventBus方法首先在main.js文件中定义一个新的bus对象，然后挂载在原型链上，生成一个全新的Vue实

怼烎@/ 2023年10月03日 22:54/ 0 赞/ 14 阅读

相关 vue兄弟组件传值方便快捷

1.创建Bus.js文件 import Vue from "vue"; // 兄弟组件之间通行 export default new Vue();

梦里梦外;/ 2023年09月28日 14:11/ 0 赞/ 198 阅读

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

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

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

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

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

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

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

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

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

相关 vue父子组件间传值

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

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

相关 vue 兄弟组件传值

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

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

相关 vue的组件间传值

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

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