当前位置: 首页 > news >正文

【Vue-Router】重定向

在这里插入图片描述
First.vue

<template><h1>First Seciton</h1>
</template>

Second.vueThird.vue代码同理

UserSettings.vue

<template><h1>UserSettings</h1><router-link to="/settings/children1">children1</router-link><br /><router-link to="/settings/children2">children2</router-link><br><button @click="toBackPage">返回</button><hr><router-view></router-view><router-view name="a"></router-view><router-view name="b"></router-view>
</template> <script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const toBackPage = () => {router.go(-1);
}
</script><style scoped></style>

index.ts

import { createRouter, createWebHistory } from 'vue-router'
import First from '../components/First.vue'
import Second from '../components/Second.vue'
import Third from '../components/Third.vue'
import UserSettings from '../components/UserSettings.vue'export const router = createRouter({history: createWebHistory(),routes: [{path: '/settings',component: UserSettings,// 当访问 /settings 时,会直接重定向访问 /settings/children1// 写法一:字符串形式// redirect:'/settings/children1',// 写法二:对象形式// redirect: {//   path: '/settings/children1'// }// 写法三:回调函数形式redirect: to => {console.log(to);// 可以 return 对象(此时可以传参) 或者 字符串// return '/settings/children1'return {path: '/settings/children1',query: {name: 'uzi'}}},children: [{path: 'children1',components: {default: First,a: Second,b: Third,},},{path: 'children2',components: {default: Third,a: Second,b: First,},},]},],
})

App.vue

<template><h1>Nested Named Views</h1><hr><router-view></router-view><hr>
</template><script setup lang="ts"></script><style scoped></style>

在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/124512.html

相关文章:

  • vulnhub靶场之ADROIT: 1.0.1
  • 【非欧几里得域信号的信号处理】使用经典信号处理和图信号处理在一维和二维欧几里得域信号上应用低通滤波器研究(Matlab代码实现)
  • 【深入理解ES6】字符串和正则表达式
  • 易服客工作室:Pixwell主题 – 现代杂志/WordPress新闻主题
  • iOS手机无法安装Charles 的ssl证书
  • Promise处理异步操作
  • jpa查询返回自定义对象、返回指定VO、POJO
  • 抖音小程序开发,收银台支付回调通知
  • selenium 爬虫
  • ​亚商投资顾问 早餐FM/0815生成式人工智能服务管理
  • C语言题目的多种解法分享 2之字符串左旋和补充题
  • 科技云报道:算力之战,英伟达再度释放AI“炸弹”
  • 油电同价、标配8155,奇瑞猛攻10-15万中型SUV市场
  • 【leetcode】【图解】617. 合并二叉树
  • 基于java的汽车改装方案网站设计与实现
  • DC电源模块减小输入电源与输出负载之间的能量损失
  • Python自动化小技巧16——分类汇总写入excel不同sheet表
  • FlexRay汽车总线静电防护,如何设计保护方案图?
  • jpg图片太大怎么压缩?这样做轻松压缩图片
  • B057-spring增强 依赖注入 AOP 代理模式 创建Bean
  • 小程序多图片组合
  • YOLO v8目标跟踪详细解读(二)
  • 【广州华锐视点】AR电力职业技能培训系统让技能学习更“智慧”
  • C#学习,反射
  • 代理模式概述
  • 最新AI系统ChatGPT网站程序源码+搭建教程/公众号/H5端/安装配置教程/完整知识库
  • 前端Flex布局
  • 文盘Rust -- Mutex解决并发写文件乱序问题 | 京东云技术团队
  • 数据结构算法--2 冒泡排序,选择排序,插入排序
  • 秋招面经——快手