我正在尝试创建一个 Vue SPA 应用程序。但该路由似乎与我在路由器中定义的不匹配。我不明白为什么会发生这种情况。据我看来，一切都应该正常。我在这里缺少什么？
我的index.html
<html>
<head>
<title>New Vue.js Project</title>
<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-router.js"></script>
</head>
<body>
<div id="app">
{{ 'Route: ' + JSON.stringify($route) }}
<v-app>
<router-view></router-view>
</v-app>
</div>
<script type="module" src="app.js"></script>
</body>
</html>
我的app.js
import routes from './routes.js'
new Vue({
el: '#app',
router: routes,
data: {
msg: 'Hello World!',
},
})
我的routes.js
import Index from './views/Index.js'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes: [
{
name: 'index',
path: '/',
component: Index,
},
],
})
当我导航到 http://localhost/new-vue-project/ 时并打印 {{ $route }} 我明白了:
{
"name":null,
"path":"/new-vue-project/",
"fullPath":"/new-vue-project/",
"matched": [
]
}
我还尝试将基本属性添加到我的路由器，但得到了相同的结果。
base: 'http://localhost/new-vue-project/',
最佳答案
我认为您需要使用不带域名(localhost)的相对路径，根据documentation ，像这样:
base: '/new-vue-project/'
还可以在 vue.config.js 文件中全局配置公共(public)路径:
module.exports = {
publicPath: process.env.NODE_ENV === 'development' ? '/new-vue-project/' : (process.env.VUE_APP_MY_APP_BASE_PATH || '/')
}
关于javascript - Vue.js 路由即使定义了也不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57569654/