При обновлении страницы реквизиты маршрутизатора Vue не обновляются

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, чтобы помочь с этим следующим образом

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>

вы можете посетить этот ссылка для получения дополнительной информации.