Question

你好我们google很多，我发现道具应该用来将参数从laravel blade（位置资源/视图）传递给vue组件（location resource / assets /）我的vue版本是2这里是我的注册刀片< / p>

      @extends('layouts.auth')

       @section('content')
          <router-view name="register" :route="{{ route('my-route') }}">
           </router-view>


     @endsection

这是我的app.js文件（位置资源/资产）

  require('./bootstrap');
  window.Vue = require('vue');
  import VueRouter from 'vue-router';

   window.Vue.use(VueRouter);

  import Register from './website/auth/register.vue';


   const routes = [
          {path: '/register', component: Register, name: 'register'},
        ]

         const router = new VueRouter({ routes })

      const app = new Vue({ router }).$mount('#app')

这是我的register.vue

      <template>
          <a :href="route">back</a>
         </template>
          <script>
             export default{
                       prop: ['route'],
               mounted() {
          console.log(this.route);
            },
       }
          </script>

但是为什么我没有获得路线的价值而抛弃未定义帮帮我，我是新来的

Answer 1

<router-view name="register" :route="{{ route('my-route') }}">

:route属性的值为{{ route('my-route') }}，但不起作用。 {{ ... }}将由Blade模板语言进行评估，并将生成一个字符串（我假设）。我的路由是example，Blade输出的HTML将如下所示：

<router-view name="register" :route="example">

这个似乎很好，但是有一个很大的错误，就是使用v-bind:或在你的情况下the shorthand :在属性名称前面。< / p>

The Vue.js documentation在v-bind上说了以下内容：

动态将一个或多个属性或组件道具绑定到表达式。

在您的情况下，路由既不是动态的（它是由服务器端的Blade生成的），也不是表达式（:route="'example'"有效，因为'example'是表达式）。< / p>

解决方案是简单地删除:。

<router-view name="register" route="{{ route('my-route') }}">

您的代码中还有一个拼写错误：它应该是props而不是prop。

在laravel 5.4中使用vue prop

1 个答案: