vue-router 仅更改命名视图之一,而不影响其他视图

2024-05-02

我正在使用 vue-router 进行测试并遇到这个问题,如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办?目前我是这样做的:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        change: Bar,
      }
    }
    {
      path: '/foo/test1',
      components: {
        default: Foo,
        change: test1,
      }
    }

    //is it possible to do it something like this?
    {
      path: '/:foo/test1',
      components: {
        default: :foo//<--- how to keep default to whatever it previously have?
        change: test1
      }
    }

  ]
})
<router-view></router-view>
<router-view name="change"></router-view>

我想我可以通过动态匹配来做到这一点,获取当前的路由名称并将其作为参数传递,但我需要保留当前的默认路由(如某些表单输入),所以我宁愿只更改其中一个视图在不影响其他人的情况下...请帮忙...


找了好久才找到有同样问题的人!

我相信你已经解决了它,但我认为当命名时没有解决方案路由器视图当前路线的孩子不能使用。

我的意思是,不能在你的 Vue 应用程序中使用路由器路由器视图(无论是否命名)都不会丢失其他路由中当前渲染的视图,除非是通过在子路由中定义它。

我所看到的是通过使用相同的组件作为父组件条目并具有子组件条目,在同一个组件中路由器视图它不会丢失父路线渲染的内容。 [https://dev.to/berniwittmann/handling-dialogs-with-vue-router-29ji] https://dev.to/berniwittmann/handling-dialogs-with-vue-router-29ji%5D

我所做的是将其从路由器中删除,将其渲染在与路由器视图以前没有连接任何路线,现在正在按预期工作!

希望能帮助到你。 (即使是几年后)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-router 仅更改命名视图之一,而不影响其他视图 的相关文章

  • Vue父组件访问子组件的compute属性

    在 Vue JS 中 当在数组元素 子元素 的计算属性中进行更改时 我无法监视数组的更改 我在编写的 JSFiddle 示例中总结了这个问题 因此该示例在逻辑上可能没有意义 但它确实显示了我的问题 https jsfiddle net tr
  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看
  • 我在 firebase.auth.ApplicationVerifier 中遇到问题

    错误发生在signInWithPhoneNumber 的第二个参数中 我无法解决这个问题 我使用了三种方法来发送 otp 验证 otp 和最后用于验证码 methods sendOTP e e preventDefault if this
  • 如何在 vue 组件的树视图中激活子类别?

    我有两个 vue 组件 我的第一个组件 父组件 如下所示
  • #NUXT.JS 中常用组件方法的存储位置

    实际上我想知道 NUXT JS 中常见组件方法的存储位置 我尝试过的事情 gt 在中间件中存储公共代码 它没用 因为据我所知 中间件只能处理对服务器的请求和响应 methods states methods SwitchManager fu
  • 删除鼠标悬停时的 Vue 自定义过滤器

    我想使用 VueJS 2 删除鼠标悬停时的截断过滤器 这是模板中的过滤器 div class eng word english truncate div 这是过滤器本身 filters truncate function value let
  • 使用 vee-validate 在 vue js 中进行验证有错误

    我想在 vuejs 中进行验证 因为我正在使用 vee validate 我的vue js版本是2 6 10 并安装 run npm install vee validate 我在 main ts 中声明 import VeeValidat
  • 仅当内容超过两行时显示只读/隐藏按钮

    我正在创建一个评论部分 类似于 youtube 的东西 并且我希望能够在 content 有多行时显示阅读更多 隐藏按钮 这就是我到目前为止所做的 我的阅读更多 隐藏按钮可以工作 因为我添加了一个计算的线夹 使内容仅在存在多行时才显示两行
  • Laravel 5.2 CORS,GET 不适用于预检选项

    可怕的 CORS 错误 跨源请求被阻止 同源策略不允许读取 远程资源位于http localhost mysite api test http localhost mysite api test 原因 CORS 标头 Access Cont
  • vue.js:观察输入并未在每次按键时触发

    我有一个input正在监视其模型属性 问题是每次按键时不会调用 watch 方法铬 安卓设备 如果我点击输入文本 就会调用它 过去确实有效 但我不知道发生了什么 在Chrome 桌面版可以正常使用 那就是watch for text每次按键
  • 使用 Vue.js 附加 HTML 元素

    所以我对此真的很陌生Vue js我想要实现的目标很简单 我试图附加这个结果Ajax请求进入我的列表 div div
  • Font Awesome 图标未按预期在选项列表中加载(但在选择时加载)

    我有一个使用 bootstrap vue 的选项列表 如下所示 它在选择窗口中看起来不错 但打开下拉菜单时并非所有图标都显示 选择图标后 将显示 IE 螺栓显示 但选择时 图标列的代码
  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo
  • 访问 .js 文件中的 Nuxt 插件

    假设我有一个脚本文件 foo js function doStuff how to access store and other plugins here export default doStuff 如果不将调用组件作为参数传递 我如何访
  • 基于 json 文件动态显示选择、复选框、日期选择器等

    对我之前的问题的补充 我根据 json 文件动态显示输入字段 现在我想根据它们的组显示选择项 复选框和日期选择器 我如何解决这个问题 我需要将这些元素推入computeJSON 但写入例如选择options item selection不管
  • 如何使用 Vue.js 向数组(数据)中的所有对象添加属性?

    背景 我在 data 中有一个数组 其中填充了来自后端的对象 如果 GET 请求检索 6 个对象 这 6 个对象将在数组中更新 Problem 我已经了解需要 vm set 来向对象添加属性 但是如何为数组中的所有对象添加属性呢 我想改变
  • 当 Vuejs 中的 props 值发生变化时,DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变
  • FCM onMessage 无法在 Firefox 中工作,但可以在 chrome 中工作

    我的代码是工作完美在chrome上 版本103 0 5060 134 但是当我在firefox 103 0 上尝试时它不工作 Service Worker 注册成功 但无法接收通知 消息 控制台中没有显示错误 这是我的代码 顺便说一句 我正
  • Vue 2 日期选择器组件

    我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件 但在选择日期后尝试更新输入时遇到困难 这是我的代码 Vue component datepicker template
  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向

随机推荐

  • Hibernate 验证器:违规消息语言

    我有一个测试类 我正在测试一个域模型 该模型用例如注释 NotNull 在我的测试课中 我首先得到验证器 private static Validator validator BeforeClass public static void s
  • Ember.js 动态子视图

    我无法让 ember 渲染动态子视图 似乎一旦渲染了子视图 绑定就会丢失 这是一个jsfiddle http jsfiddle net zaius XYzfa http jsfiddle net zaius XYzfa 当您在两个编辑器页面
  • CSS:悬停在多个 div 上时显示样式

    我有 2 个不同尺寸的 div 一个放在另一个上面 所以有一个共同的交叉区域 这两个 div 都有 CSS hover 规则集 如果我将鼠标悬停在每个 div 上 则规则适用 但是 如果我移过交叉区域 则只会激活顶部 div 悬停 当鼠标悬
  • 如何找到给定数组的所有可能的子集?

    我想在 C 或 C 中提取数组的所有可能子集 然后计算所有子集数组各自元素的总和 以检查其中有多少等于给定数字 我正在寻找的是算法 我确实理解这里的逻辑 但我现在还无法实现这一逻辑 考虑一组S of N元素 以及给定的子集 每个元素要么属于
  • 使用 pymongo 查询空字段

    我想使用 python 查询 mongo 中的空字段 但是它很难处理单词 null 或 false 它要么给我错误 它们在 python 中未定义 要么在 mongo 中搜索字符串 null 和 false 这两种情况我都不希望发生 col
  • Cloudflare Worker 缓存 API 出现问题

    我现在花了无数的时间尝试让缓存 API 来缓存一个简单的请求 我让它在中间工作过一次 但忘记向缓存键添加一些内容 现在它不再工作了 不用说 cache put 没有指定请求是否实际被缓存的返回值并不完全有帮助 我只能进行反复试验 有人可以给
  • 如何解决警告“没有明确的所有权”

    我有一种方法 它采用间接指针作为参数 然后 如果出现错误 将其设置为错误对象 我正在尝试打开尽可能多的警告 但其中之一 Implicit ownership types on out parameters 在此方法中生成警告 id doWi
  • asp.net 3.5 是否支持单个页面上的多个表单?

    我只是想确认这是否属实 我记得在某处读到现在这是可能的 但经过一个小时的谷歌搜索后我找不到任何明确的证据 在 ASP NET WebForms 中 您不能使用多个表单 因为它使用单个表单模型 在 ASP NET MVC 中您可以
  • 如何将2个匹配查询加入到elasticsearch的查询中?

    我想查询以下数据user id is 1 and name is John 写一个常用的SQL很容易 select from t where user id 1 and name John 但对我来说进行elasticsearch的查询并不
  • 从 Azure 流分析将数据插入 Azure SQL 数据库表时出现“OutputDataConversionError.TypeConversionError”

    我正在尝试学习 Azure IoT 我正在尝试将 MQTT 消息发送到 IoT 中心 在 IoT 中心 我使用流分析将数据输出到 SQL 数据库中 但目前在流分析输出中 我遇到此错误 9 12 30 AM 源 OUTPUTSQL 在处理时间
  • 如何设置按钮的大小?

    我将按钮放在带有 GridLayout 的 JPane 中 然后我用 BoxLayout Y AXIS 将 JPanel 放入另一个 JPanel 中 我希望 GridLayout 中的按钮是方形的 我使用 tmp setSize 30 3
  • 将列表视图项转换为单个位图图像

    参考这个主题 Android 获取所有 ListView 项目的屏幕截图 https stackoverflow com questions 12742343 android get screenshot of all listview i
  • WCF 复杂 JSON 输入错误(无法通过 QueryStringConverter 转换)

    我在将复杂 JSON 作为 WCF 服务中的参数工作时遇到问题 在 Visual Studio 2008 SP1 中使用 Microsoft Net 3 5 SP1 签订以下合同 ServiceContract public interfa
  • 带有 numberOfLines 和 lineBreakMode 的 UILabel

    我正在开发一个必须同时支持 iOS6 和 iOS7 的项目 我的问题是它在不同的系统上工作不同 我试图创建行数等于 2 的 UILabel 但是当我将其换行模式设置为 NSLineBreakByTruncatingTail 时 它的工作方式
  • 实时跟踪每分钟/小时/天的前 100 个 Twitter 单词

    我最近遇到这样一个面试问题 Given a continuous twitter feed design an algorithm to return the 100 most frequent words used at this min
  • 并排镜像两个打开的缓冲区中的文件位置

    我试图在 emacs 中找到一个包 函数 它可以并排打开两个文件 使其位于同一行位置 镜像正在移动的缓冲区的移动 这意味着 对于并排打开的两个缓冲区 在其中一个缓冲区中移动 向上 向下翻页 移动光标等 将在另一个缓冲区中进行相同的移动 更具
  • 如何在data.table中编写累积计算

    顺序累积计算 我需要进行时间序列计算 其中每行计算的值取决于上一行计算的结果 我希望能够利用data table 实际问题是水文模型 累积水平衡计算 在每个时间步长增加降雨量 并减去径流和蒸发作为当前水量的函数 该数据集包括不同的流域和场景
  • Micronaut 数据:没有为存储库配置支持 RepositoryOperations

    当我尝试使用内存 h2 数据库和 Jpa 配置 micronaut data 时 出现以下异常 我一直在关注文档 https micronaut projects github io micronaut data latest guide
  • 将 Stripe webhook 与 Rails 结合使用

    我已经按照 Ryan Bates 的 Railscast http railscasts com episodes 288 billing with stripe 成功构建了一个 Rails 应用程序 但是 在 Railscast 中他没有
  • vue-router 仅更改命名视图之一,而不影响其他视图

    我正在使用 vue router 进行测试并遇到这个问题 如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办 目前我是这样做的 const router new VueRouter routes path components