时间戳

首页 > 解决方案 > 未启用 VueJS 路由器配置

vue.js - 未启用 VueJS 路由器配置

问题描述

在我的 VueJS 项目中，我在文件“router.js”中配置了路由。

import VueRouter from 'vue-router'
import personDetails from './components/component.vue'

Vue.use(VueRouter)

export default new VueRouter({
    mode : 'history',
    base : '/',
    routes : [
        {
            path : '/:group/:id',
            name : 'personDetails',
            component : personDetails ,
            props : true
        }
    ]
})

在 main.js 文件中，我启用了这样的路由配置：

import App from './App.vue'
import router from './router'
new Vue({
  router,
  el : '#app',
 components : { App }
 }).$mount('#app')

这是我的 App.js 文件：

<template>
  <div id="app">
    <router-view v-bind="$props" />
  </div>
</template>
<script>

export default {
  name: 'App',
  props : ['group', 'id'],
  mounted() {
    console.log('Mounted App')    
  }
}    
</script>

我通过运行“vue-cli-service build”和“npx http-server ./dist”命令来运行该项目。

我注意到当我像这样调用配置的路由器 - “http://localhost:8080/1234/56”时，我收到 404 错误。但是，当我调用默认 URL“http://localhost:8080”时，我得到一个空白页面，因为应用程序在没有任何路由参数的情况下加载。我可以看到添加到 main.js 和 App.js 的 console.log() 语句，但没有看到“personDetails”组件。

我添加了一个默认路由器配置，这似乎工作。

{
   path : '/',
   redirect:'/456/123'
}

此默认路由加载 'personDetails' 组件，其路径参数映射到 456 和 123。

请给出一些调试提示？

标签： vue.jsvue-routervuejs-routing

解决方案

这是由于mode: 'history'. 更多细节在这里 - HTML5 历史模式

由于我们的应用程序是单页客户端应用程序，没有适当的服务器配置，如果用户 直接在浏览器中访问http://oursite.com/user/id ，将会收到 404 错误。

要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资产，它应该提供与您的应用程序所在的 index.html 页面相同的页面。

推荐阅读