Vue路由器不工作

Posted

技术标签:

【中文标题】Vue路由器不工作【英文标题】:Vue-router is not working 【发布时间】:2018-03-26 22:37:06 【问题描述】:

我是 Vue 新手。我一直在尝试使用 Vue-Router 设置一个简单的路由。但是我遇到了一个问题,我不知道为什么。

当我转到“http://localhost:8080/#/”网址时,我可以看到“仪表板”消息,但当我转到“http://localhost:8080/#/login”网址时,我看不到“登录”。

谢谢

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/components/Dashboard'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router(
  routes: [
    
      path: '/',
      component: Dashboard
    ,
    
      path: '/login',
      Component: Login
    
  ]
)

登录.vue

<template>
    <p>Login</p>
</template>

<script>
  export default 
</script>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default 
</script>

仪表板.vue

<template>
    <p>Dashboard</p>
</template>

<script>
  export default 
    name: 'Dashboard'
  
</script>

【问题讨论】:

【参考方案1】:

我不是 Vue 专家,但我觉得你应该导航到 localhost:8080/login 而不是 localhost:8080/#/login

您还在 index.js 的第 16 行中将 Component 大写

【讨论】:

以上是关于Vue路由器不工作的主要内容,如果未能解决你的问题,请参考以下文章

vue-router 应该在点击时路由,不工作

Vue路由器未加载组件

实现 vue-router 后 Vue.js 不工作

vue3 路由器不显示我的组件

Vue2 - 路由级别的延迟加载不起作用?

vue路由全面详解(上):基本使用多级路由工作模式……