在 laravel 5.4 中使用 vue 道具答案

【问题标题】：using vue prop in laravel 5.4在 laravel 5.4 中使用 vue 道具
【发布时间】：2018-01-11 17:53:57
【问题描述】：

大家好，我google了很多，我发现应该使用道具将参数从laravel刀片（位置资源/视图）传递到vue组件（位置资源/资产/）我的vue版本是2这里是我的注册刀片

      @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>

但它会抛出 undefine 为什么我没有获得路线的价值帮帮我，我是 vue 新手

【问题讨论】：

标签： laravel-5 vue.js vuejs2

【解决方案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 : 在属性名称前面的用法。

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

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

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

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

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

您的代码中还有一个错字：应该是props 而不是prop。

【讨论】：