在 Vue.js 中的路由器链接的“：to”属性中传递一个道具答案

【问题标题】：Pass a props in the ":to" attribute of a router link in Vue.js在 Vue.js 中的路由器链接的“：to”属性中传递一个道具
【发布时间】：2020-05-23 11:09:05
【问题描述】：

我在 vue 中创建路由器链接并将路由名称作为道具传递给它时遇到问题... 我想做的基本上是这样的：

<template>
  <div>
    <router-link :to="myProps">Login</router-link>
  </div>
</template>

<script>
  export default {
    name: componentName,
    props: {
      myProps: {
        type: String,
        default: '{ name: login }'
      }     
    }
  }
</script>

登录当然是在我的路由器中定义的。但是当我将路线作为道具提供时，我会被重定向到/%7B%20name:%20'login'%20%7D。你知道解决这个问题的任何技巧吗？

【问题讨论】：

标签： javascript vue.js vue-router vue-props

【解决方案1】：

你从默认值得到的是一个字符串，但你需要一个对象。试试这样：

props: {
  myProps: {
    type: Object,
    default: () => ({name: 'login'})
  }
}

这里有更多关于 props 默认值的信息：https://vuejs.org/v2/guide/components-props.html#Prop-Validation

【讨论】：