web-dev-qa-db-ja.com

vue-routerでの基本オプションの機能

基本オプションの documentation のように：

アプリのベースURL。たとえば、単一ページのアプリケーション全体が/ app /の下で提供される場合、baseは値 "/ app /"を使用する必要があります。

しかし、私は次のように試してみましたが、うまくいかないようです：

const router = new VueRouter({
  base: "/app/",
  routes
})

デモ フィドル 。

vue.jsvuejs2vue-router
10
Saurabh

ベースのデフォルト値は'/'です。ルーティングの使用方法から類推：

<router-link to="home">Home</router-link>

または

<router-link :to="{ path: '/abc'}" replace></router-link>

/appと works を省略しました。ベースはrouter-linkの一部である必要はありません

[〜＃〜]編集[〜＃〜]

vue-routerでのbaseの使用

（このテストでは、webpackテンプレートでvue-cliを使用しました。）

私は私のようなルーター構成を持っていました：

export default new Router({
  base: '/app',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'RangeInputDemo',
      component: ComponentDemo
    }
  ]
})

ベースを'/app'として追加しても、ベースが'/'に設定されているかのように、プロジェクト全体で発生したルーティングに違いはありませんでした。

サーバー側からURLを変更しようとしました（プロジェクトが提供されているURL）。

したがって、dev-server.jsでは、次のようになります。

var uri = 'http://localhost:' + port

アプリのURLを制御するため、次のように少し変更しました。

var uri = 'http://localhost:' + port + '/app'

これにより、アプリケーションは次のように表示されました。

enter image description hereenter image description here

vueコンソール（2番目の画像））でfullPathが'/'であることに注意してください。

念のため、もう一度baseを'/'に変更しました。

enter image description here

したがって、base構成のrouterプロパティは、サーバーが'/'以外のルートでアプリケーションにサービスを提供する場合、baseを使用すると、設定したURLからアプリケーションを実行できます。

質問ではルートを/appの下に移動する必要があるため、サーバーがサービスを提供するルートを変更することを想定していない場合、親ルートとして/appを使用することが解決策になると思います。

8
Amresh Venugopal

同じ問題があり、「ベース」の設定が機能しませんでした-回避策は、ルーターのベースURLを更新することです。

{ name: 'listings', path: baseUrl + '/listings',   component: PageListings}

名前でルートを参照します。

<router-link :to="{ name: 'listings' }" exact>Listings</router-link>
0
ego