如何解决未启用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'
}
此默认路由使用映射到456和123的路径参数加载“ personDetails”组件。
请提供一些调试技巧?
解决方法
这是由于mode: 'history'
引起的。此处有更多详细信息-HTML5 History Mode
,由于我们的应用是单页客户端应用,因此没有适当的 服务器配置,如果用户访问,用户将收到404错误 http://oursite.com/user/id直接在他们的浏览器中。
要解决此问题,您需要做的就是添加一个简单的包罗万象 备用路由到您的服务器。如果网址与任何静态网址都不匹配 资产,它应与您的应用程序所在的index.html页面相同 内。
您可以将http-server
的后备代理用作catch-all redirect:npx http-server ./dist -P http://localhost:8080?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。