Vue.js VueRouter router-link changes URL but page does not

Question

my main.js file has the following

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import { routes } from '../src/router/routes';

Vue.use(TurbolinksAdapter);
Vue.use(VueRouter);

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

document.addEventListener('turbolinks:load', () => {
  var element = document.getElementById('vue_code');
  if (element != null) {
    new Vue({
      el: '#vue_code',
      Store,
      router,
      render: h => h(EventIndex)
    });

My routes.js file has the following:

import Vue from "vue/dist/vue.esm";
import VueRouter from "vue-router";
import EventForm from "../components/EventForm";

Vue.use(VueRouter);

const routes = [
  {
    path: "/events/new",
    name: "EventForm",
    component: EventForm
  }
];

The router-link snippet from my component file EventsTable.vue file has the following:

<template lang=haml>
...

%tbody
  %tr{v-for: "event in events"}
    %td
      %router-link.fa.fa-pencil{to: "/events/new"}
      %router-view

 ...
<template>

<script>
    import EventForm from './EventForm';

    components: {
      EventForm
    }
</script>

When I click on the link, i expect the page to change to the EventForm page. Instead, the url changes, but the browser window does not change. But once I reload the page, the browser jumps to the EventForm page.

Any help is appreciated. Thanks

I'm not a haml expert but it seems you have router-view in every row of your table. Try to remove it from table and place just single router-view outside your table... — Michal Levý
– Michal Levý, Commented Jan 29, 2020 at 21:13
Your routes file shouldn't need anything but your component imported as it's just definitions that will be used outside of it. — jshrc
– jshrc, Commented Jan 29, 2020 at 21:15

Chase DeAnda · Accepted Answer · 2020-01-29 21:13:35Z

1

The first line of the vue-turbolinks package states:

⚠️ If you're using vue-router or another Javascript routing library, you don't need to use Turbolinks or this adapter. Turbolinks is meant to level up the traditional request-render cycle by loading the new page in the background and this adapter makes it possible to use Vue components on pages rendered in this manner. If you've decided to use a single-page app, you already have everything you need. 🤘

You cannot use vue-router and Turbolinks together. Turbolinks handles all of your site navigation. Navigating using vue-router doesn't work because it is attempting to do a history push instead of an entire page load.

I suggest programmatically routing using the Turbolinks.visit() function instead of using vue-router. You'll need to create a new view for the EventForm page that loads your vue component.

answered Jan 29, 2020 at 21:13

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

It'sJohnny Over a year ago

hmm...after removing turbolinks from my main.js and using the DOM Content Loader instead and using just the vue-router, I still get the same issue. But it might be that I am using Vue as my front-end and rails as my back-end. I still use some of the rails routes, which may be conflicting? I am not sure. Thank you again for the insight.

Chase DeAnda Over a year ago

@It'sJohnny yeah your hunch is correct, you cannot handle routing with Rails AND Vue, you have to pick one or the other. I would suggest understanding the difference between server-side and client-side routing: medium.com/@wilbo/…

Collectives™ on Stack Overflow

Vue.js VueRouter router-link changes URL but page does not

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related