Javascript 在VueJS中使用相同组件包装三个特定路由

我有三个路由，/login，/signup和/forget，以及它们相应的组件，它们只包含您期望的基本表单。我希望这些组件包含在登录页组件中，而不必将登录页逻辑放在我的三个组件中，因为这样会重新加载容器，并且不会显示我的转换

我的登录页上有类似的内容

<h1>Welcome to my web app</h1>
<transition name="slide" mode="">
   <router-view></router-view>
<transition>

我需要一些隐藏的路线还是什么？或者我只在App.vue中基于条件逻辑包装容器（在我看来，这似乎不是一个好的做法）

你应该好好解决你的问题。以下是文档中的一个示例：

在以下组件中，

用户

部分在两个路由中相同，这些路由中的内部内容需要不同：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

是一个顶级插座。它渲染由顶级管线匹配的组件。类似地，渲染组件也可以包含自己的嵌套组件。例如，如果我们在用户组件的模板中添加一个：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const用户={
模板：`
用户{{$route.params.id}
`
}

要将组件呈现到此嵌套出口中，我们需要使用VueRouter构造函数配置中的子选项：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

const路由器=新的VueRouter({
路线：[
{path:'/user/:id'，组件：user，
儿童：[
{
//UserProfile将在用户的
//当/user/：id/profile匹配时
路径：“配置文件”，
组件：UserProfile
},
{
//UserPosts将在用户的
//当/user/：id/posts匹配时
路径：“posts”，
组件：UserPosts
}
]
}
]
})

请注意，以/开头的嵌套路径将被视为根路径。这允许您利用组件嵌套，而不必使用嵌套URL

你应该好好处理你的问题。以下是文档中的一个示例：

在以下组件中，

用户

部分在两个路由中相同，这些路由中的内部内容需要不同：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

是一个顶级插座。它渲染由顶级管线匹配的组件。类似地，渲染组件也可以包含自己的嵌套组件。例如，如果我们在用户组件的模板中添加一个：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const用户={
模板：`
用户{{$route.params.id}
`
}

要将组件呈现到此嵌套出口中，我们需要使用VueRouter构造函数配置中的子选项：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

const路由器=新的VueRouter({
路线：[
{path:'/user/:id'，组件：user，
儿童：[
{
//UserProfile将在用户的
//当/user/：id/profile匹配时
路径：“配置文件”，
组件：UserProfile
},
{
//UserPosts将在用户的
//当/user/：id/posts匹配时
路径：“posts”，
组件：UserPosts
}
]
}
]
})

请注意，以/开头的嵌套路径将被视为根路径。这允许您利用组件嵌套，而不必使用嵌套URL

---

我能够使用像这样的命名嵌套

元素来完成这项工作

<template>
    <div>
       <router-view name="wrapper">
          <router-view></router-view>
       </router-view>
   </div>
</template>

routes.js

import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import Forgot from './components/Forgot';
import RegistrationWrapper from './components/RegistrationWrapper';

export const routes = [{
    path: '/signup',
    components: {
        default: SignUp,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/login',
    components: {
        default: SignIn,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/forgot',
    components: {
        default: Forgot,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/',
    components: {
        default: SignIn,
        'wrapper': RegistrationWrapper
    }
}];

注册包装器.vue

<template>
   <h1>Welcome to my web app</h1>
   <transition name="slide" mode="">
      <slot></slot>
   <transition>
<template>

欢迎使用我的web应用程序

我的App.vue看起来像这样

<template>
    <div>
       <router-view name="wrapper">
          <router-view></router-view>
       </router-view>
   </div>
</template>

---

我能看到的唯一缺点是，我现在必须为我的所有路由提供一个包装器，这可能会变得多余。如何检测App.vue中是否提供了包装器？还有，我在这里没有看到另一个缺点吗？

我能够使用这样的命名嵌套

元素来完成这项工作

<template>
    <div>
       <router-view name="wrapper">
          <router-view></router-view>
       </router-view>
   </div>
</template>

routes.js

import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import Forgot from './components/Forgot';
import RegistrationWrapper from './components/RegistrationWrapper';

export const routes = [{
    path: '/signup',
    components: {
        default: SignUp,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/login',
    components: {
        default: SignIn,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/forgot',
    components: {
        default: Forgot,
        'wrapper': RegistrationWrapper
    }
}, {
    path: '/',
    components: {
        default: SignIn,
        'wrapper': RegistrationWrapper
    }
}];

注册包装器.vue

<template>
   <h1>Welcome to my web app</h1>
   <transition name="slide" mode="">
      <slot></slot>
   <transition>
<template>

欢迎使用我的web应用程序

我的App.vue看起来像这样

<template>
    <div>
       <router-view name="wrapper">
          <router-view></router-view>
       </router-view>
   </div>
</template>

---

我能看到的唯一缺点是，我现在必须为我的所有路由提供一个包装器，这可能会变得多余。如何检测App.vue中是否提供了包装器？还有，我在这里没有看到另一个缺点吗？

在router.js中，您可以将currentComponent作为道具发送

import landingPage from './components/LandingPage';
export const routes = [
    { path: '/signup', component: landingPage, props: { currentComponent: 'SignUp' } },
    { path: '/login', component: landingPage, props: { currentComponent: 'SignIn' } },
    { path: '', component: landingPage, props: { currentComponent: 'SignIn' } },
    { path: '/forgot', component: landingPage, props: { currentComponent: 'Forgot' } }
];

并将登陆页面视为组件（LangIpage VUE）

欢迎使用我的web应用程序
从“./components/SignUp”导入注册；
从“./components/SignIn”导入登录；
从“./组件/忘记”导入忘记；
导出默认值{
组件：[“注册”、“登录”、“忘记”]，
道具：['currentComponent']
}

在router.js中，您可以将currentComponent作为道具发送

import landingPage from './components/LandingPage';
export const routes = [
    { path: '/signup', component: landingPage, props: { currentComponent: 'SignUp' } },
    { path: '/login', component: landingPage, props: { currentComponent: 'SignIn' } },
    { path: '', component: landingPage, props: { currentComponent: 'SignIn' } },
    { path: '/forgot', component: landingPage, props: { currentComponent: 'Forgot' } }
];

并将登陆页面视为组件（LangIpage VUE）

欢迎使用我的web应用程序
从“./components/SignUp”导入注册；
从“./components/SignIn”导入登录；
从“./组件/忘记”导入忘记；
导出默认值{
组件：[“注册”、“登录”、“忘记”]，
道具：['currentComponent']
}

因为这样更简单：

因为这样更简单：

我也这么想，但我的主要问题是如何从url隐藏路由？我觉得像mysite.com/landing/login这样的东西有点不直观。@MathieuBertin找到一些更好的词：P

mysite.com/registration/login

。但是可能有更好的解决方案。是的，我正在寻找一个解决方案，使我能够做到这一点，同时保持网址为mysite.com/login.Plus，注册似乎没有意义登录。我找到了一个解决方案，这对我来说是可行的。不确定这是不是最好的方法