123_路由的params参数

最新推荐文章于 2024-09-07 18:47:11 发布

「已注销」

最新推荐文章于 2024-09-07 18:47:11 发布

阅读量179

点赞数

分类专栏： Vue学习笔记文章标签： vue.js Vue Router

本文链接：https://blog.csdn.net/gty204625782/article/details/121800944

版权

Vue学习笔记专栏收录该内容

83 篇文章 3 订阅

订阅专栏

本文介绍如何在Vue应用中使用Vue Router进行参数传递，通过Message.vue和Detail.vue组件的交互，展示params参数在路由配置及页面间数据传递的实践。

摘要由CSDN通过智能技术生成

根据上一节内容做出更改

文章目录

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->

        <!-- 跳转路由并携带params参数，to的对象写法 -->
        <!-- 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！ -->
        <router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
          {{m.title}}
        </router-link>

      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    data() {
      return {
        messageList: [{
            id: '001',
            title: '消息001'
          },
          {
            id: '002',
            title: '消息002'
          },
          {
            id: '003',
            title: '消息003'
          }
        ]
      }
    }
  }
</script>

Detail.vue

<template>
  <ul>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息标题：{{$route.params.title}}</li>
  </ul>
</template>

<script>
  export default {
    name: 'Detail',
    mounted() {
      console.log(this.$route)
    }
  }
</script>

router文件夹下的index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [{
      name: 'guanyu',
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [{
          path: 'news',
          component: News,
        },
        {
          path: 'message',
          component: Message,
          children: [{
            name: 'xiangqing',
            //使用占位符声明接收params参数，这样地址栏也会有这些参数
            path: 'detail/:id/:title',
            component: Detail,
          }]
        }
      ]
    }
  ]
})