Vue 无法在此传递参数。$router.push

Question

我无法从重定向到另一页面的一个组件页面传递参数。 我有一个确认，它执行一些验证过程并将用户重定向到登录页面。在这种情况下，我想在登录页面上显示一条消息。

我使用

this.$router.push

重定向的确认页面代码。

methods: {
    async confirmSignUp() {
      this.$router.push({ name: 'Login page', params: {data: '1'} })
     ...
   }
},
async created() {
  await this.confirmSignUp()
}

我的路由器密码

  {
    // student login
    path: '/login',
    name: 'login',
    component: () => import('layouts/student/MainLayout.vue'),
    children: [
      { path: '/login', name: 'Login page', component: () => import('pages/student/LogInPage.vue')}
    ],
    meta: { preventLoginUser: true },
    props: true
  },

我的登录页面代码

  mounted() {
    let data = this.$route
    console.log('data is', data)
  },

这里我只是记录整个路由器的响应，我从参数中得到一个空对象。

fullPath: "/login"
hash: ""
href: "/login"
matched: (2) [{…}, {…}]
meta: {preventLoginUser: true}
name: "Login page"
params: {}
path: "/login"
query: {}
redirectedFrom: undefined

请注意，我使用的是 Quasar 框架

Answer 1

在您的路由器文件中，您为父路由和子路由使用相同的路径，从子组件中删除

/

否则，它将被视为根路径。

{
    // student login
    path: '/login',
    name: 'login',
    component: () => import('layouts/student/MainLayout.vue'),
    children: [
      { path: 'login', name: 'Login page', component: () => import('pages/student/LogInPage.vue')}
    ],
    meta: { preventLoginUser: true },
    props: true
  },

请注意，这将生成路线为

/login/login

.

如果需要使用

/login

，把子路由改成

{
    // student login
    path: '/login',
    component: () => import('layouts/student/MainLayout.vue'),
    children: [
      { path: '', name: 'login', component: () => import('pages/student/LogInPage.vue')}
    ],
    meta: { preventLoginUser: true },
    props: true
  },

Answer 2

使用方法

当你想为父路由创建嵌套路由时，你只需要使用

children

键。如果您正在定义单个路由，就像在本例中一样，则不需要使用 children 键。所以在上面的例子中，你可以定义

path

，

name

，

component

，和

meta

参数如下：

{
  path: '/login',
  name: 'login',
  component: () => import('layouts/student/LogInPage.vue'),
  meta: { preventLoginUser: true },
  props: true
}

称呼它：

this.$router.push({ name: 'login' }); // because "name: 'login'" in route

路由中的参数

我不知道你的“数据”参数在你的例子中意味着什么。如果你想在路由中使用一个变量，你需要这样做：

{
  path: '/login/:myparameter',
  name: 'login',
  component: () => import('layouts/student/LogInPage.vue'),
  meta: { preventLoginUser: true },
  props: true
}

称呼它：

this.$router.push({ name: 'login', params: { myparameter: '1' } });

调用路由前运行函数 --> "Guard"

如果参数的目的是检查调用它的用户是否登录，那么有更好的解决方案。您可以在每条路由之前声明自己的逻辑，以确定路由应该如何运行。例如，对于

/login

路由，如果你想让它在用户已经登录的情况下自动重定向到

/admin

路由。

// in this code, the isLoggedIn() declare your authentication logic, return true if logged and false if not

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('layouts/student/LogInPage.vue'),
    meta: { preventLoginUser: true },
    props: true
  },
  // ...
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // if call "login", but logged
  if (to.name === 'login' && isLoggedIn()) {
    // redirect to "admin"
    next('/admin')
  }
  // if not...
  else {
    // continue redirect to called route
    next()
  }
})

来自 Vue Router 的例子

为什么需要 MainLayout.vue？

Layout

和

Page

之间有显着差异。我会从一开始就将它们放在不同的文件夹中：

/layouts

和

/pages

.

如果

MainLayout.vue

是你所有页面的全局布局，那么你可以将它单独包含在

LogInPage.vue

.

通过 Vue 路由器

驼峰命名

我注意到的另一件事是，

name

属性始终只是一个名称，您可以稍后参考此路线。所以你不必记住操作的URL地址，你只需要请求名为

login

的路由。如果路线名称是

Login Page

，你就更难记住了，你只会让事情变得更难。

如果还是需要使用多词的名字，可以考虑省略空格，使用

CamelCase

格式，比如

loginPage

.