ベースURLがルートではない場合にハッシュ番号を削除するにはどうすればよいですか？

パスがルートでないSPAを提供しようとしています。例えば/loginベースURLがルートではない場合にハッシュ番号を削除するにはどうすればよいですか？

デフォルトでは、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>

スクリプト

出典

2016-12-22 James Burke

<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>

それをsloveする、WebPACKの2とVUE-CLIを使用しました。

npm i -g vue-cli

vue init webpack

アプリを初期化するときは、VUE-ルータを使用してチョイスできる

編集VUE-ルータ：

npm start

： mode: 'history'

はローカルアプリをサーブ

出典

2017-04-22 10:25:56 cuduy197

ベースURLがルートではない場合にハッシュ番号を削除するにはどうすればよいですか？

答えて

関連する問題