Vue Router not displaying template

Question

I'm trying to get a Vue Router working in my Vue app. When I click the link it just reloads the page and doesn't show the Dashboard template. Any thoughts on how to fix this?

This is what I have in my main.js file:

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'
import TreeView from "vue-json-tree-view"
import '@/assets/css/tailwind.css'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import store from './store.js'

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.config.productionTip = false
Vue.use(VModal)
Vue.use(TreeView)



let Dashboard = require('./components/Dashboard.vue');
let Home = require('./components/LandingPage.vue');



const routes = [{
  path: '/',
  component: Home
},
{
  path: '/dasboard',
  name: Dashboard,
  component: Dashboard
}
];

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

Vue.use(VueRouter)

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

In my LandingPage.vue file I have this link:

<router-link to="/dashboard">Dashboard</router-link>

My Dashboard.vue file is a simple template:

<template>
  <div>
    <h1>Dashboard</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Thanks

beingyogi · Accepted Answer · 2020-05-24 16:19:36Z

3

Your routes should be defined as this

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

In your LandingPage.vue file write:

<router-link :to="{name:'dashboard'}">Dashboard</router-link>

answered May 24, 2020 at 16:19

beingyogi

1,4162 gold badges18 silver badges31 bronze badges

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

Comments

Ronald · Accepted Answer · 2020-05-24 16:13:44Z

1

You made a typo in the routes:

path: '/dasboard',

Also, name for a route expects a string, not the component.

answered May 24, 2020 at 16:13

Ronald

1,0396 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue Router not displaying template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related