Question

我试图以某种方式通过$ router.push传递预定义的表单数据，所以当点击该链接时，应该以dropdrown的形式定义一些预定义的数据/道具，或者只是将一些数据传递给输入表单

我尝试了不同的方法，但没有任何方法可以使用，有人可以帮助我吗？

在我要传递数据的另一个Vue组件中输入：

<input type="text" name="" value="">

单击路由器：

<ul>
  <li @click="clickRouter(path)"> Click here </li>
</ul>

data() {
    return {
      path: '/products',
    };
  },
  methods: {
    clickRouter(link) {
      this.$router.push(link);
    },
  },

更新：根据{{3}}，你可以这样做：

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

现在这个网址？plan = private我希望能够执行/register?name=Myname

之类的操作

这将预先填充组件中输入的名称。

干杯

Answer 1

您尝试了哪些方法？

我看到两种可能性：

在父组件中设置属性
使用vuex

angular .module('MyApp', []); angular .module('MyApp') .controller('KeyController', [ '$scope', function($scope) { /*$scope.info = 'Welcome to Test';*/ /*console.log(" Key controller is working ");*/ $scope.api_url; $scope.api_token; $scope.savedApiUrl = ''; $scope.savedApiToken = ''; $scope.submit = function() { localStorage.setItem('api_url', $scope.api_url); localStorage.setItem('api_token', $scope.api_token); var savedApiUrl = localStorage.getItem('api_url'); var savedApiToken = localStorage.getItem('api_token'); $scope.savedApiUrl = savedApiUrl; $scope.savedApiToken = savedApiToken; console.log($scope.savedApiUrl); console.log($scope.savedApiToken) } } ]); - 方法会设置属性，然后将其绑定到clickRouter - 字段中。

<强>更新

index.js（路由器）：

input

App.vue：

import Vue from "vue";
import Router from "vue-router";
import register from "@/components/register";

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: "/register",
            name: "register",
            component: register
        }
    ]
});
export default router;

<强> register.vue：

<template>
    <div id="app">
        <header>
            <button @click.stop.prevent:="clickRouter(path)">Go to register</button>
        </header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

<script>
    export default {
        name: "app",
        data () {
            return {
                path: '/register',
                prefill: ''
            }
        },
        methods: {
            clickRouter(link) {
                this.prefill = 42;
                this.$router.push({ path: link, query: { plan: 'private' }});
            }
        }
    }
</script>

如何在Vue的另一个组件中传递道具到表单

1 个答案: