Question

使用最新的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来帮助解决这个问题

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上追溯加载这些参数？

Answer 1

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

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

也许您可以这样：

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

您可以访问link以获得更多信息。

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

1 个答案: