美文网首页
vue-router的param属性

vue-router的param属性

作者: tutututudou | 来源:发表于2022-06-25 00:47 被阅读0次

使用param属性,url的格式为(没有问号,都是斜杠):

http://localhost:8080/#/home/message/detail/003/%E6%B6%88%E6%81%AF3

param.PNG

message.vue文件

 <!-- 字符串写法 -->
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

/{m.id}/{m.title}要用/把参数分开,router文件夹下面index.js的路由配置中的用路由跪着:占位,例如:

   {
     path:'message',
     component:Message,
     children:[//拼接message这个路由
      {
       name:'detail',
      //:x,:y占位
       path:'detail/:x/:y', //detail/${m.id}/${m.title},会赋值如x=${m.id},y=${m.title}
       component:Detail
     }
     ]
    }

detail.vue中的$route属性就能接收到x和y,如下:

(接收的是path里面的x和y),总的流程就是message.vue to属性的/里面的值 给router文件夹下面index.js的path里面的冒号占位符,冒号占位符在把值传给detail.vue(message.vue跳转到detail.vue【:to="/home/message/detail/${m.id}/${m.title}"】)

  • message.vue传给index.js,index.js传给detail.vue
<template>
  <div>
   <h2>消息详情:{{$route.params.x}}</h2>
   <h2>消息编号:{{$route.params.y}}</h2>
  </div>
</template>

message.vue文件

  <!-- 对象写法 -->
    <!-- name:写的是路由配置里面的名字,一定要写,但是不能只写path -->
    <!-- {{m.title}}这个要写,不然没有焦点,无法触发detail子路由组件 -->
    <router-link :to="{
      name:'detail',
       params:{
         x:m.id,
         y:m.title
       }
      }"
    >{{m.title}}</router-link>

params的数据x和y,和路由里面的path的:x/:y命名一致

相关文章

  • vue-router的param属性

    使用param属性,url的格式为(没有问号,都是斜杠): http://localhost:8080/#/hom...

  • jQuery事件

    jQuery动画 参数:1、什么属性做动画,属性设置{param1: value1, param2: value2...

  • css3过渡transition学习总结

    过渡 1.过渡简写 transition:param1 param2 param1 要过渡的属性 all 表示所...

  • 路由配置及动态传参

    一、路由配置 1、安装vue-router:npm install vue-router 2、meta可以设置属性...

  • DBIx::Custom::Mapper

    简介 DBIx::Custom::Mapper模块是DBIx::Custom框架的参数映射器。 属性 param ...

  • 删除对象数组中的属性

    /** * 从对象数组中删除属性为objPropery,值为objValue元素的对象 * @param Arra...

  • #{param}与${param}的区别

    #{param}将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号。 ${param}将传入的数据直接显...

  • vue 中的路由

    一,路由的安装和应用 npm install vue-router 二,router-link中的属性 2.1 :...

  • vue - 学习笔记

    环境变量与模式 设置 基础 过滤器 观察属性 计算属性 表单绑定 表单修饰符 组件 路由 vue-router 事...

  • vue-router replace属性

    replace属性放在router-link标签里面,可以替换前面一个历史路径 1.点击【通知】2.再点击【信息】...

网友评论

      本文标题:vue-router的param属性

      本文链接:https://www.haomeiwen.com/subject/cxxidrtx.html