Vue router props not updating on page refresh

Question

Using latest laravel / Vue

I have a vue router set as follows

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'),
    },
});

And This all works great, but I need to be able to visit the route and have the component load, so I built a catch all in laravel to help with this as follows

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

And this works, if some one visits the url specified in the router or does a page refresh it works...kind of it loads the page correctly but none of the params passed through the router links work. Router link set as such in a blade file....

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>

Now my question is as follows how come when visitng the base page then clicking the router link everything works fine, as opposed to visitng the url and it routes to the correct spot but it wont grab the user param? Is there a way to retroactively load those params on page refresh or url vist?

are you using a <router-view> property in your main component? — Kapitan Teemo
what file extension are you using? is it .blade or .vue? — Kapitan Teemo

Kapitan Teemo Kapitan Teemo · Accepted Answer · 2018-12-15T01:46:53

assuming that you are using .blade file extension for your view.

Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched.

maybe you could do it like this:

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

you can visit this link for more information.

Vue router props not updating on page refresh

1 Answers