如何在 vue 路由器中传递道具 [英] How to pass props in vue router

问题描述

大家好，到目前为止，我一直在尝试在 vue 路由中传递道具，我能够在下面实现这一点，但这不是我想要的.

目前有效

route.js

<代码>{路径:'/注册/'，name: '注册',组件:需要('./views/Login').默认，}

home.vue

<router-link tag="li" :to="{ name: 'register', params: { isRegisteringMe: 'true' }}" class="btn btn-green m-top-20menu-btn" v-show="!isLoggedIn">注册</router-link>

在 register.vue 中，我可以 console.log(this.$route.params.isRegisteringMe); 当我点击注册链接时将返回 true.

这很好，但发生的情况是用户想直接输入 url website.com/register 这种方法不起作用.所以我尝试了几种方法，但当我在下面写这个时仍然没有找到.

<代码>{路径:'/注册/:id'，name: '注册',道具:{ isRegisteringMe:'嗨道具'}，组件:需要('./views/Login').默认，}

或

<代码>{路径:'/注册'，name: '注册',道具:{ isRegisteringMe:'嗨'}，参数:{ isRegisteringMe:'嗨'}，组件:需要('./views/Login').默认，}

相信我，我尝试了许多不同的组合，但我仍然被卡住了.

解决方案

我想你对 vue-router 中 params 的用法有一些误解.参数应该是路径的一部分.

例如，如果路径设置类似于

<代码>{路径:'/注册/:id'，//...}

<router-link :to="{ name: 'register', params: { id: 'abc123', isRegisteringMe:'true' }}">注册</router-link> 将用户链接到 register/abc123.

由于路径设置为path:'/register/:id',，isRegisteringMe参数未定义，不会显示在url中.>

参数应该是路径的一部分.我看到了一些可以改变这种情况的方法.

1. 对 isRegisteringMe 使用 url 查询.例如， /register?isRegisteringMe=true ( <router-link :to="{ name: 'register', query: { isRegisteringMe: 'true' }}").并从 $route.query.isRegisteringMe
获取值

更新:

如果您希望用户始终默认使用 isRegisteringMe:true在注册组件的 mounted 生命周期事件中进行重定向.

2. 在应用程序的状态中设置 isRegisteringMe，如果您正在使用它，最好在 vuex 中设置.然后在注册组件中，获取状态并相应地使用它.

希望这能让你朝着正确的方向前进.

Hi guys i been trying to pass props in vue routes so far i was able to achieve this below, but is not what i wanted.

So far this works

route.js

{
    path: '/register/',
    name: 'register',
    component: require('./views/Login').default,
}

home.vue

<router-link tag="li" :to="{ name: 'register', params: { isRegisteringMe: 'true' }}" class="btn btn-green m-top-20 menu-btn" v-show="!isLoggedIn">Register</router-link>

And in register.vue i can console.log(this.$route.params.isRegisteringMe); which will return true when i click on Register link.

This is fine but what happen is user wants to type in the url directly website.com/register this method will not work. So i try several method but still not getting no where when i write this below.

{
    path: '/register/:id',
    name: 'register',
    props: { isRegisteringMe: 'hi props'},
    component: require('./views/Login').default,
}

Or

{
    path: '/register',
    name: 'register',
    props: { isRegisteringMe: 'hi'},
    params: { isRegisteringMe: 'hi'},
    component: require('./views/Login').default,
}

Trust me i tried many different combination but i am still stuck.

解决方案

I think you have some misconception about the usage of params in vue-router. Params should be part of the path.

for e.g., if the path setting is like

{
    path: '/register/:id',
    // ...
}

<router-link :to="{ name: 'register', params: { id: 'abc123', isRegisteringMe:'true' }}">Register</router-link> will link the user to register/abc123.

since the path setting is path: '/register/:id',, isRegisteringMe param is not defined and won't be displayed in the url.

Params should be part of the path. I see a few way you can change this.

1. use url query for isRegisteringMe. for eg, /register?isRegisteringMe=true ( <router-link :to="{ name: 'register', query: { isRegisteringMe: 'true' }}"). and get the value from $route.query.isRegisteringMe

update:

if you want user to always have isRegisteringMe:true by default do a redirection in register component's mounted lifecycle event.

2. set isRegisteringMe in the app's state, or preferably in vuex if you are using it. then in register component, get the state and use it accordingly.

hope that this move you towards the right direction.

这篇关于如何在 vue 路由器中传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！