I'm trying to serve a SPA where the path is not the root. e.g. /login
By default Vue-router will change the URL to /login#/ and render the page as normal.
If I add mode: 'history' to my router, to prevent the hash from appearing, it will not render the component.
I'm using Bottlepy to serve the application when I load up http://localhost:8080/login. I've also tried using /login/ which will make it /login/#/. But adding mode: 'history' still won't render the component.
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
<template id="login">
<div>
<p>Hello Login</p>
</div>
</template>
Script
<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>
Using, vue-cli with webpack 2, to slove that.
npm i -g vue-clivue init webpackWhen you init app, you can choise using vue-router
edit vue-router :
mode: 'history'Serve local app :
npm start