Vue路由器道具在页面刷新时未更新答案

【问题标题】：Vue router props not updating on page refreshVue路由器道具在页面刷新时未更新
【发布时间】：2019-05-15 05:39:32
【问题描述】：

使用最新的 laravel / Vue

我有一个vue路由器设置如下

const routes = [
{
    path: '/constructionprojects/:id/details',
    name: 'details',
    component: require('./components/construction/ConstructionProjectDetails.vue'),
    props: true,
},

const router = new VueRouter({
    mode: 'history',
    routes, // short for `routes: routes`
});

const app = new Vue({
    //add router to app
    router,
    el: '#app',
    components: {
      checklist: require('./components/roofing/common/Checklist.vue'),
    },
});

这一切都很好，但我需要能够访问路由并加载组件，所以我在 laravel 中构建了一个 catch all 来帮助解决这个问题，如下所示

Route::get('/constructionprojects/{project}/{wild}', 'Construction\ConstructionProjectController@show')->middleware('role:admin|op|ar|cdir|cpm')->where('wild', '.*');

这很有效，如果有人访问路由器中指定的 url 或刷新页面，它可以正常工作……它可以正确加载页面，但通过路由器链接传递的参数都不起作用。在刀片文件中设置的路由器链接......

router-link :to="{ name: 'details', 
    params: {
      id: {{ $project->id }},
      user: {{ Auth::user()->load(['roles']) }},
}}">Project Details</router-link>

<transition name="slide-fade">
    <router-view :key="$route.fullPath"></router-view>
</transition>

现在我的问题如下，当访问基本页面然后单击路由器链接时一切正常，而不是访问 url 并且它路由到正确的位置但它不会获取用户参数？有没有办法在页面刷新或 URL 访问时追溯加载这些参数？

【问题讨论】：

您是否在主组件中使用<router-view> 属性？
是的，我是，编辑显示。
您使用的是什么文件扩展名？是.blade 还是.vue？

标签： javascript laravel vue.js vue-component vue-router

【解决方案1】：

假设您正在为您的view 使用.blade 文件扩展名。

由于许多 JavaScript 框架也使用“花括号”来表示给定的表达式应该显示在浏览器中，你可以使用@ 符号通知 Blade 渲染引擎一个表达式应该保持不变。

也许你可以这样做：

router-link :to="{ name: 'details', 
params: {
  id: @{{ $project->id }},
  user: @{{ Auth::user()->load(['roles']) }},
}}">Project Details</router-link>

您可以访问此link 了解更多信息。

【讨论】：