Vue路由器不显示模板

Question

我正在尝试让 Vue 路由器在我的 Vue 应用程序中工作。 当我单击该链接时，它只是重新加载页面并且不显示仪表板模板。 关于如何解决这个问题的任何想法？

这就是我的 main.js 文件中的内容：

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')

在我的 LandingPage.vue 文件中，我有这个链接：

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

我的 Dashboard.vue 文件是一个简单的模板：

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

<script>
export default {

}
</script>

<style>

</style>

谢谢

Answer 1

你的路线应该这样定义

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

在您的 LandingPage.vue 文件中写入：

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

Answer 2

你在路线上打错了：

path: '/dasboard',

此外，路由的name需要一个字符串，而不是组件。