在 Vue.js 中的路由器 link 的“:to”属性中传递道具

Question

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

<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。您知道解决此问题的任何技巧吗？

Answer 1

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

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

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

在 Vue.js 中的路由器 link 的“:to”属性中传递道具

Pass a props in the ":to" attribute of a router link in Vue.js

javascript

vue.js

vue-router

vue-props