Router-link only works one time

Forgive me if this seems stupid, but I’m coming here from Angular 1.8 and the router works completely differently it seems, si may simply not grasp what isnt correct here.

I have 2 routes set up right now. In this case dashboard and liveview

that are called via a menu component loaded into app.vue

<div id="app" data-theme="default">
    <TopNavigation></TopNavigation>
    <router-view></router-view>
</div>

the TopNavigation component loosk liek this under the template tag:

<li class="active">
        <router-link to="/dashboard">System Overview</router-link>
    </li>
    <li>
        <router-link to="/liveview">Video</router-link>
</li>

What’s Happening:

When the application loads it defaults to / I then click dashboard or Video in any order and i can navigate to the dashboard or the video view 1 time. The second time that either link is clicked the system fails to navigate and im stuck on whatever page i am on, despite the fact that the URL changes as expected, the view does not. If i click a link to a view im not on then fully refresh the browser, i end up in the view denoted by the url and clicking the other link allows navigation only one time and then the links stop working again.

What i Expect:

To be routed to the correct view every time i click the link.

What AM i Doing wrong here? I cannot imagine this is a bug or there woudl be a lot more posts about this.

Full App.vue:

<template>
<div id="app" data-theme="default">
    <TopNavigation></TopNavigation>
    <router-view></router-view>
</div>

</template>

<script>
import TopNavigation from './components/navigation/top_navigation/topnav.component.vue'

export default {
    name: 'app',
    components: {
        TopNavigation
    }
}

</script>

Full Topnav.component.vue

<template>
<div class="topnav">
    <TopnavLink></TopnavLink>
</div>
</template>

<style>
.topnav {
    width: 100%;
    height: 45px;
    background: var(--topnav_bg);
    color: var(--text-inverted);
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.75);
    position: fixed;
}

</style>

<script>
import TopnavLink from './topnav.link.component.vue';

export default {
    data() {

    },
    components: {
        TopnavLink
    }
}

</script>

Full topnav.link.component.view (this will eventually be used for dynamic generation)

<template>
<ul class="toplinks">
    <li class="logo"><i class="fab fa-pushed"></i> Security Station</li>
    <li class="active">
        <router-link to="/dashboard">System Overview</router-link>
    </li>
    <li>
        <router-link to="/liveview">Video</router-link>
    </li>
</ul>
</template>

<script>
</script>

full main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import 'bulma/css/bulma.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import App from './App.vue';
import Dashboard from './components/dashboard/dashboard.component.vue'
import VideoLiveView from './components/video/live-view.component.vue'

Vue.use(VueRouter);

const routes = [{
path: '/dashboard',
component: Dashboard
}, {
path: '/liveview',
component: VideoLiveView
}];

const router = new VueRouter({
routes,
});

new Vue({
el: '#app',
router,
render: h => h(App),
});

Hello, I haven’t used the router so I was reduced to reading documentation which I’m sure you already did too.

One thing I noticed though is that your render method seems substantively different than the example in the router’s documentation.

Is that possibly relevant?

1 Like

How so? The only real difference between the Documentation and my implementation to me is that im using a components to construct the navigation and a component to construct the links, but this process is working. The documentation uses:

const Foo = { template: '<div>foo</div>' }

Whereas is use:

import TopNavigation from './components/navigation/top_navigation/topnav.component.vue

the reason behind this is that certain links will be visible to certain users so everntually the links will be generated based on an API call but for now everything is hard coded just for the purposes of templating and basic troubleshooting.

Adnd to rule that out as an issue i removed the TopNavigation component and simply moved the UL directly into app.vue and the result is the same unfortunately.

Is this what you were referring to or is there something i am missing that you are seeing here?

seriously… it turned out to be this:

data() {

},

causing a crash in onDestroy in the router because no data was returned… guess i should have opened the console to debug before posting.

1 Like