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需要一个字符串，而不是组件。

Vue路由器未显示模板

2 个答案: