Vue Router query 命名路由 params props

news2024/12/23 23:30:16

6.5.路由的 query 参数

  1. 传递参数
    <!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link
  :to="{ 
    path:'/home/message/detail', 
    query:{ id: m.id, title: m.title } 
  }" >
  跳转
</router-link>
  2. 接收参数
    $route.query.id 
$route.query.title

在这里插入图片描述


src/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:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children: [
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children: [
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

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

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link
                        :to="{
                        path:'/home/message/detail',
                        query:{ 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>

src/pages/Detail.vue

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

<script>
    export default {
        name: "Detail"
    }
</script>

6.6.命名路由

命名路由

  1. 作用：可以简化路由的跳转
  2. 如何使用
    1. 给路由命名
      { 
  path:'/demo', 
  component:Demo, 
  children:[
    { 
      path:'test', 
      component:Test, 
      children:[ 
        { 
          name:'hello' // 给路由命名 
          path:'welcome', 
          component:Hello, 
        } 
      ] 
    }
  ]
}
    2. 简化跳转
      <!--简化前，需要写完整的路径 --> 
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 --> 
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 --> 
<router-link 
  :to="{ 
    name:'hello', 
    query:{ id:666, title:'你好' } 
  }" >
  跳转
</router-link>

src/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:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children: [
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

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

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link
                        :to="{
                        //path:'/home/message/detail',
                        name: 'detail', // 使用name进行跳转
                        query:{ 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>

6.7.路由的 params 参数

  1. 配置路由，声明接收params参数
    { 
  path:'/home', 
  component:Home,
  children:[
    { 
      path:'news', 
      component:News 
    },
    { 
      component:Message, 
      children:[ 
        { 
          name:'xiangqing', 
          path:'detail/:id/:title', // 🔴使用占位符声明接收params参数 
          component:Detail 
        } 
      ]
    }
  ]
}
  2. 传递参数，特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
  :to="{ 
    name:'xiangqing', 
    params:{ id:666, title:'你好' } 
  }" >
  跳转
</router-link>
  3. 接收参数
    $route.params.id 
$route.params.title

src/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:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children: [
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail/:id/:title', // 使用占位符声明接收params参数
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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的对象写法 -->
                <router-link :to="{
                    name:'detail',
                    params:{ id:m.id, title:m.title }
                }">
                    {{m.title}}
                </router-link>&nbsp;&nbsp;
            </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>

src/pages/Detail.vue

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

<script>
    export default {
        name: "Detail"
    }
</script>

6.8.路由的 props 配置

props作用：让路由组件更方便的收到参数

{ 
  name:'xiangqing',
  path:'detail/:id', 
  component:Detail,
  
  //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 
  // props:{a:900} 
  
  //第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件 
  // props:true
  
  //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 
  props($route){ 
    return { 
      id: $route.query.id, 
      title: $route.query.title 
    } 
  }
}

src/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:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children: [
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail/:id/:title', // 使用占位符声明接收params参数
                            component:Detail,

                            // props的第一种写法，值为对象（用的很少，因为值都是死数据）
                            // 该对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}

                            // 第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数
                            props($route){ // 这里可以使用解构赋值
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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的对象写法 -->
                <router-link :to="{
                    name:'detail',
                    params:{ id:m.id, title:m.title }
                }">
                    {{m.title}}
                </router-link>&nbsp;&nbsp;
            </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>

src/pages/Detail.vue

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

<script>
    export default {
        name: "Detail",
        props:['id','title']
    }
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/693632.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

1753_使用Perl修改文件时间戳

1753_使用Perl修改文件时间戳

全部学习汇总&#xff1a; GreyZhang/perl_basic: some perl basic learning notes. (github.com) 对于使用软件对文件进行造假的手段我一直感兴趣&#xff0c;我很想知道那些人是通过什么手段修改的文件属性。一直以来&#xff0c;我觉得修改文件的时间戳是一个很难的工作&…
阅读更多...
Altium Designer23 设计备忘

Altium Designer23 设计备忘

1、新建工程 2、新建原理图 3、新建PCB 4、添加元器件SCHLIB&#xff0c;PCBLIB库 5、绘制原理图 6、给元器件添加封装 7、原理图更新至PCB 8、绘制PCB
阅读更多...
[State of GPT] OpenAI讲座随笔记

[State of GPT] OpenAI讲座随笔记

原版&#xff1a;State of GPT B站翻译版&#xff1a;【精校版】Andrej Karpathy微软Build大会精彩演讲&#xff1a; GPT状态和原理 - 解密OpenAI模型训练 1 GPT Training Pipeline图解 记录一下对这个图的理解&#xff1a; 大模型训练的四个阶段&#xff1a; Pretraining 阶…
阅读更多...
开发者活动：云原生的开源 AI 大模型基础设施

开发者活动：云原生的开源 AI 大模型基础设施

随着 ChatGPT 的火热&#xff0c;大语言模型和相关应用不断涌现。你是否了解大语言模型的技术细节&#xff1f;你是否曾经开发过大语言模型应用&#xff1f;如果你对大语言模型背后的基础设施感兴趣&#xff0c;那么7月8号&#xff0c;北京海淀中关村创业大街&#xff0c;云原生…
阅读更多...
chatgpt赋能python：Python调用关系图：了解你的代码依赖关系

chatgpt赋能python：Python调用关系图：了解你的代码依赖关系

Python调用关系图&#xff1a;了解你的代码依赖关系 Python是一种强大的编程语言&#xff0c;具有易读易写、开放源代码、多功能等优点。但是在开发大型项目时&#xff0c;代码会变得复杂&#xff0c;不同模块之间的依赖关系也会变得混乱。为了更好地了解你的代码依赖关系&…
阅读更多...
Openresty原理概念篇(九)LuaJIT分支和标准Lua有什么不同

Openresty原理概念篇(九)LuaJIT分支和标准Lua有什么不同

一 LuaJIT分支和标准Lua有什么不同 ① 背景 luajit官方 标准lua官方 openresty自身维护的luajit 编译luajit ② LuaJIT 在 OpenResty 整体架构中的位置 ③ 标准 Lua 和 LuaJIT 的关系 ④ 为什么选择LuaJIT ⑤ lua特别之处 1&#xff09;Lua 的下标从1开始 2) 使用…
阅读更多...
Java HelloWorld

Java HelloWorld

一、java命令 javac&#xff1a;将.java文件编译成.class文件 cp - 指定class搜索路径 d - 指定class文件生成目录 java: 执行.class或.jar文件 cp指定class搜索路径 示例&#xff1a;java test1.app #表示执行./test1/app.class文件main函数 jar:打包生成.jar文件 v- 可视化输…
阅读更多...
星星之火，可以燎原——关于太赫兹的技术进展

星星之火，可以燎原——关于太赫兹的技术进展

盼望着&#xff0c;盼望着&#xff0c;5G来了&#xff0c;6G的脚步也近了。除了做好现有的技术工作&#xff0c;作为通信人还要不断关注新技术的发展&#xff0c;真心不易&#xff01;无线数据链路的容量在过去十几年中呈指数级增长&#xff0c;但对更高数据速率的需求持续增加…
阅读更多...
MySQL数据库优化技术一

MySQL数据库优化技术一

纵论 对mysql优化时一个综合性的技术&#xff0c;主要包括 表的设计合理化(符合3NF)添加适当索引(index) [ 四种: 普通索引、主键索引、唯一索引unique、全文索引 ]分表技术( 水平分割、垂直分割 ) 水平分割根据一个标准重复定义几个字段值相同&#xff0c;表名称不同的表&…
阅读更多...
Android Jetpack Compose之ModalBottomSheet的使用

Android Jetpack Compose之ModalBottomSheet的使用

Android Jetpack Compose是一个现代化的UI工具包&#xff0c;让开发者以声明式的方式来构建Android应用。今天我们要讨论的是其中一个重要组件——ModalBottomSheet。 1. ModalBottomSheet简介 ModalBottomSheet是Jetpack Compose中的一个组件&#xff0c;它允许我们从屏幕底部…
阅读更多...
Hugging News #0626: 音频课程更新、在线体验 baichuan-7B 模型、ChatGLM2-6B 重磅发布

Hugging News #0626: 音频课程更新、在线体验 baichuan-7B 模型、ChatGLM2-6B 重磅发布

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」&#xff0c;本期 Hugging News 有哪些有趣的消息…
阅读更多...
第27章 uView 内置路由使用注意事项

第27章 uView 内置路由使用注意事项

1 uView 内置路由不支持通过“localhost”域名直接获取数据。 在前后分离开发中“axios” 路由支持使用“localhost”域名或IP地址获取后端的数据&#xff0c;所以不管是IIS部署还是后端调试通过“axios” 路由都能获取数据&#xff0c;对于.NetCore的前后端分离开发来说“axio…
阅读更多...
【proxychains4】虚拟机内kali走主机代理

【proxychains4】虚拟机内kali走主机代理

文章目录 简介安装配置使用测试 简介 ProxyChains是Linux和其他Unix下的代理工具。 它可以使任何程序通过代理上网&#xff0c; 允许TCP和DNS通过代理隧道&#xff0c; 支持HTTP、 SOCKS4和SOCKS5类型的代理服务器&#xff0c; 并且可配置多个代理。 ProxyChains通过一个用户定…
阅读更多...
数据结构--单链表的定义

数据结构--单链表的定义

数据结构–单链表的定义 本节的学习目标&#xff1a; 单链表的定义&#xff08;如何用代码实现&#xff09; 优点:不要求大片连续空间&#xff0c;改变容量方便 缺点:不可随机存取&#xff0c;要耗费一定空间存放指针 代码实现 struct LNode {ElemType data; //数据域stru…
阅读更多...
vcruntime140.dll,丢失如何修复，vcruntime140.dll,丢失修复详细办法（有效的方法）

vcruntime140.dll,丢失如何修复，vcruntime140.dll,丢失修复详细办法（有效的方法）

今天打开photoshop软件的时候&#xff0c;突然间就打不开&#xff0c;电脑报错由于找不到vcruntime140.dll&#xff0c;无法继续执行此代码&#xff0c;然后我就把photoshop卸载了&#xff0c;再重新安装&#xff0c;依然还是报错。这个可怎么办&#xff1f;vcruntime140.dll如…
阅读更多...
C++【day1】

C++【day1】

练习 定义一个命名空间Myspace&#xff0c;包含以下函数&#xff1a;将一个字符串中的所有单词进行反转&#xff0c;并输出反转后的结果。 #include <iostream> #include<iomanip>using namespace std;namespace Myspace { void reversal(string *str); }void My…
阅读更多...
CW32L083不同主频功耗测试

CW32L083不同主频功耗测试

本文主要介绍CWL083VCT6芯片在不同主频下的功耗测试方法和测试结果。 1.HSIOSC时钟 HSIOSC 时钟由内部 RC 振荡器产生&#xff0c;不需要外部电路&#xff0c;比 HSE 时钟的成本低&#xff0c;启动速度快。HSIOSC 时钟频率固定为 48MHz&#xff0c;频率精度低于 HSE 时钟。RC …
阅读更多...
《计算机系统与网络安全》 第二章 计算机网络基础与TCPIP协议安全性

《计算机系统与网络安全》 第二章 计算机网络基础与TCPIP协议安全性

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
苹果app用发布证书打包后怎么装手机测试

苹果app用发布证书打包后怎么装手机测试

一、背景 iOS 的开发证书打包后可以通过爱思助手安装到手机上测试&#xff0c;但发布 (Production) 证书是不允许安装在手机上的。而在实际开发过程中&#xff0c;尽管通过开发证书测试过了&#xff0c;iOS生产包仍然可能会出现一些问题&#xff0c;需对生产包也进行测试。 而…
阅读更多...
【Stable diffusion教程】AutoDL云部署超详细步骤说明【外婆都会】

【Stable diffusion教程】AutoDL云部署超详细步骤说明【外婆都会】

1 AutoDL云端部署操作流程 1.1 登录/注册 官网&#xff1a;https://www.autodl.com/home&#xff0c;点击右上角登录/注册。此处我已经注册了 如果你是学生的话&#xff0c;注册完之后&#xff0c;进入控制台&#xff0c;在右上角点一下学生认证&#xff0c;然后你就可以享受…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023