草庐IT

javascript - Vue-Router 抽象父路由

coder 2024-07-15 原文

我正在尝试将我当前的站点迁移到 vuejs。站点地图必须是:

/login
/signup
/password-reset
/browse
/search
... dozens of other routes

由于其中一些路由共享很多 fx，我将它们设为父路由的子路由:

[{ // public routes
  path: '/', 
  component: Auth,
  children: [
    { path: '/login', component: Login },
    { path: '/signup', component: Signup },
    { path: '/password-reset', component: PasswordReset },
  ]
}, 
{ // routes behind Authentication
  path: '/', 
  component: Home,
  children: [
    { path: '/browse', component: Browse },
    { path: '/search', component: Search }
  ]
}]

问题很明显:Auth 和 Home base 组件现在在技术上是相同的路由路径，我遇到了路由错误。因为我会有很多路由共享相同的基础组件和 fx，所以我想让它们成为这些抽象状态的子级。

问题 1:如何实现这些路由及其父级抽象状态而不会发生冲突，并且不必向子级添加所有包装逻辑？

问题 2:我怎样才能使父状态 () 不可路由，或者如果它们是，则默认为子状态？

最佳答案

当多个路由共享同一条路径时，数组中的第一条路由优先。所以你需要把 Home 路由放在 Auth 路由之前。这样，/路径将始终匹配 Home 路由而不是 Auth 路由。这也意味着不可能直接路由到你想要的 Auth 路由。

如果您不希望 Home 路由可访问，您可以指定在完全匹配时应该发生的重定向:

{
  path: '/',
  component: Home,
  redirect: '/browse',           // Redirect to path, or
  redirect: { name: 'browse' },  // Redirect to named route
  children: ...
}

如果您的 Auth 组件没有特定于身份验证的 UI，您可能不想使用这样的“抽象”路由来强制执行身份验证。有很多关于如何在 vue-router 中实现这一点的信息；这是一种方法:

// Routes

{
  path: '/profile',
  component: Profile,
  meta: { auth: true },
}

// Router hooks

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.auth) && !authenticated) {
    next('/login');
  } else {
    next();
  }
});

关于javascript - Vue-Router 抽象父路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44663978/

javascriptVue-Routercomponent39sectionvue.js

有关javascript - Vue-Router 抽象父路由的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  3. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  6. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - cucumber 的路由问题 - 2

    我正在使用rails3和cucumber，除了这个小问题，一切都很顺利GivenIamonthe"editautomobile"pageNoroutematches{:controller=>"automobiles",:action=>"edit"}(ActionController::RoutingError)现在路径在paths.rb中设置为edit_automobile_path在routes.rb中我有汽车作为资源，我搭建了它所以请告诉我我遗漏了什么，清楚地定义了路线并且匹配，因为我运行了rake路线并看到了路线。请指出正确的方向 最佳答案

  9. ruby - Rails 路由 : Giving default values for path helpers - 2

    有什么方法可以为url/path助手提供默认值吗？我有一个可选范围环绕我的所有路线:#config/routes.rbFoo::Application.routes.drawdoscope"(:current_brand)",:constraints=>{:current_brand=>/(foo)|(bar)/}do#...allotherroutesgohereendend我希望用户能够使用这些URL访问网站:/foo/some-place/bar/some-place/some-place为了方便起见，我在我的ApplicationController中设置了一个@current

  10. ruby-on-rails - 将 Rails 路由助手作为类方法添加到类中 - 2

    我如何将像“root_path”这样的Rails路由助手作为类方法添加到像my_model.rb这样的类中？所以我的课是这样的:ClassMyModeldefself.fooreturnself.root_pathendendMyModel.foo以上不起作用，因为ClassMyModel不响应root_path这是我所知道的:我可以使用includeRails.application.routes.url_helpers，但这只会将模块的方法添加为实例方法我试过扩展Rails.application.routes.url_helpers但它没用请随时给我上课:)

随机推荐