Question

我正在尝试为路径不是根的SPA提供服务。例如/login

默认情况下，Vue-router会将URL更改为/login#/并正常呈现页面。

如果我将mode: 'history'添加到路由器，为了防止哈希出现，它将不会呈现组件。

当我加载http://localhost:8080/login时，我正在使用Bottlepy来提供应用程序。我也尝试使用/login/来/login/#/。但添加mode: 'history'仍然无法呈现组件。

的index.html

<body>
  <div id="app">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"></a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><router-link to="/">Home</router-link></li>
        </ul>
      </div>
    </nav>
    <div class="container">

      <router-view></router-view>

    </div>
  </div>
</body>

模板

<template id="login">
  <div>
    <p>Hello Login</p>
  </div>
</template>

脚本

<script>
var LoginComponent = Vue.extend({
    template: '#login'
  });


// Define routes
const routes = [
  { path: '/', component: LoginComponent }
]

// Create the router instance and pass the `routes` option
const router = new VueRouter({ routes: routes, mode: 'history' })

// Create and mount the root instance.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!
</script>

Answer 1

使用带有webpack 2的vue-cli来解决这个问题。

FlatButton

npm i -g vue-cli

初始应用时，您可以选择使用vue-router

编辑vue-router：vue init webpack

服务本地应用：

mode: 'history'

如何在基本URL不是root时删除哈希＃？

1 个答案: