Question

我正在研究一个使用VueJS和vue-router的项目。一切正常，但是路由器似乎将/#附加到了我的所有路由中，我不知道为什么。

因此，当我通过WebStorm中的npm run serve运行我的应用程序并将浏览器导航到localhost:8080/（命令的输出告诉我）时，我被重定向到localhost:8080/#/我的网站出现了。然后，如果我使用<router-link>或$router.push()导航到-例如-/about，则URL为localhost:8080/#/about。

但是，有趣的是，如果我直接在浏览器的URL字段中输入localhost:8080/about，则会重定向到localhost:8080/about#/，并显示根路由/的组件。。从那里使用<router-link>会变得更奇怪，例如转到/input会使我进入localhost:8080/about#/input，但仍然显示正确的内容。

我在文件router.js中有路由器专用的代码：

import Vue from 'vue'
import Router from 'vue-router'

// [...] components are imported here

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About },
    // [...] more routes in this simple pattern, nothing fancy
  ]
})

我的main.js如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这是我的index.html页：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>qma</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but qma doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这是App组件，它是其他所有内容的基础：

<template>
  <div id="app">
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <!-- [...] more links here -->
        </ul>
      </nav>

    <router-view/>

    <footer>
      <router-link to="/about">Impressum</router-link>
    </footer>
  </div>
</template>

我尚未在vue配置中设置任何BaseURL或类似名称，因为我目前仅在本地工作，并且在那里（在应运行）在本地主机根目录上运行。

任何帮助将不胜感激！

Vue路由器会将/＃附加到每条路线

0 个答案: