首页 > 其他分享 >Vue路由,子路由,动态路由,动态路由参数,路由查询参数

Vue路由,子路由,动态路由,动态路由参数,路由查询参数

时间:2023-06-03 09:46:03浏览次数:44  
标签:参数 跳转 router 动态 id 路由

一、路由、子路由、动态路由

子路由、动态路由类似,不同的是子路由同时有路由跳转和页面跳转的,动态路由只有路由跳转,没有页面跳转

举例如下:/customerHome 下有 item1  item2 两个子路由。

import { createRouter, createMemoryHistory, RouteRecordRaw } from 'vue-router';
 
const routes: Array<RouteRecordRaw> = [
{
    path: '/customerHome',
    name: 'customerHome',
    component: CustomerHome,
    redirect: '/customerHome/item1/1',
    children: [
      {
        path: 'item1/:id',
        name: 'item1',
        component: Item1
      },
      {
        path: 'item2',
        name: 'item2',
        component: Item2
      }
    ]
  }
]
 
// 创建
const router = createRouter({
  history: createMemoryHistory(),
  routes
});
// 暴露出去
export default router;

二、动态路由参数、路由查询参数

// 一、路由参数
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
const goToPage = (url) => {
  // 当定义了动态路由时,可通过params传递动态路由参数
  // 当需要传递查询参数时,可通过query传递
  router.push({ name: url, params: { id: '1' },query: { userId: '123' } }); // customerHome/item/1
};
 
// 二、在跳转后的接收页面获取路由参数和查询参数
// 方式1:(推荐),路由页面通过props接收
props: {
    id: {
        type: String,
        default: ''
    },
    userId: {
        type: String,
            default: ''
    }
}
 
// 方式2:通过引入useRoute获取
import { useRoute } from 'vue-router';
 
let id = route.params.id; // 1
let userId = route.query.userId; // 123

 

标签:参数,跳转,router,动态,id,路由
From: https://www.cnblogs.com/le-fang/p/17453319.html

相关文章

  • postman 常用参数例子
    文档路径:https://learning.postman.com/docs/getting-started/navigating-postman/常用tests用法如下:1.检查responsebody中是否包含某个stringtests["Bodymatchesstring"]=responseBody.has("string_you_want_to_search");注意:"Bodymatchesstring"......
  • python 仅关键字参数
    defstandard_arg(arg)defstandard_arg(arg):print(arg)standard_arg(2)standard_arg(arg=2)对参数没有限制defstandard_arg(arg,/)defstandard_arg(arg,/):print(arg)standard_arg(2)#正确standard_arg(arg=2)#报错仅限位置参数def stand......
  • 计网:实验二 路由器动态路由的配置方法
     一、实验目的: 1.理解动态路由的工作原理;2.学习并掌握动态路由协议RIP的配置;3.学习并掌握动态路由协议OSPF的配置;4.进一步学习路由器的配置命令。二、实验原理:RIP:RoutingInformationProtocol,路由信息协议,是应用较早、使用较普遍的IGP内部网关协议,适用于小型同类网络,是典型......
  • 动态规划基础之矩阵取数问题 51nod1083
    题目地址:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1083题目:1083 矩阵取数问题基准时间限制:1 秒空间限制:131072 KB分值: 5 难度:1级算法题例如:3*3的方格。133213221......
  • 最大子矩阵和问题 动态规划 51nod1051
    1051 最大子矩阵和基准时间限制:2 秒空间限制:131072 KB分值: 40 难度:4级算法题例如:3*3的矩阵:-13-12-13-312和最大的子矩阵是:3-1-1312Input......
  • 前置知识:可变参数
          ......
  • 【C语言】动态内存管理函数的 深度解析 #是不是对数组不能变大变小而烦恼呢?学会动态内
    前言动态内存管理函数可以说很好用,但是有些小危险。所谓动态内存分配,就是指在程序执行的过程中动态地分配或者回收存储空间的分配内存的方法。动态内存分配不像数组等静态内存分配方法那样需要预先分配存储空间,而是由系统根据程序的需要即时分配,且分配的大小就是程序要求......
  • iostat相关参数说明——await:平均每次设备I/O操作的等待时间 (毫秒),如果%util接近 100
    iostat是I/Ostatistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视。它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况。同vmstat一样,iostat也有一个弱点,就是它不能对某个进程进行深入分析,仅对系统的整体情况进行分析。iostat的语法如下:iostat[......
  • 【解决方法】锐捷路由器配置IP地址,如RSR路由器
    环境:工具:锐捷EVE,VMwareWorkstationPro远程工具:SecureCRT系统版本:Windows10问题描述:描述:在进入锐捷路由器接口配置IP地址时,没有添加ip地址的命令。提示:若按照教程还是无法完成操作,可以进入右侧的企鹅,找我看看。解决方法-视频与文字教程:视频教程:文字教程:1.......
  • Python中动态导入对象importlib.import_module()的使用
    参考:https://blog.csdn.net/edward_zcl/article/details/88809212https://www.cnblogs.com/yhjoker/p/15969508.html经常在项目中碰到需要根据配置动态导入不同的类的方法进行运行,这时就要用动态函数import_module的使用方法假设项目目录结构如下: ......