web-dev-qa-db-ja.com

戻るボタンを使用したVue.jsルーティング

このVue.js Routingサンプルアプリケーションはすでに使用しています。

https://github.com/chrisvfritz/vue-2.0-simple-routing-example

src/main.jsには、非常に多くのデータ値があります。

const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname,
    token : "",
    errorMessage : '', etc...etc..
  },

今度はsocket.ioでトークンを"sdawdda2d2ada2ad22ad"に設定します

CurrentRouteよりもアプリケーションの起動が"/"と等しい場合、そのokey、最初のページが読み込まれます。 src/routes.js

'/': 'Home',
'/about': 'About'

/ about（url：localhost:8080/about）を確認したい場合は、正常に機能しますが、アプリが再度作成されたため、トークンとerrorMessageは再び空になります。

トークン値を失うことなくページを変更したい場合は、次のように使用できます。

this.currentRoute = "/about"       (url: localhost:8080)

その動作は良好ですが、URLは変更されないため、ブラウザで戻るボタンを使用できません。ブラウザーが/ aboutに移動したときにトークン値を失いたくない場合、どうすれば私のVueアプリを分離できますか？

本当にありがとう！

javascriptvue.jsvue-router
7
ketom

HomeルートからAboutルートに移動する場合は、<router-link>を使用して移動する必要があります。

homeページから、次のようにaboutページに移動できます。

<router-link to="/about">Go to my About Page</router-link>

これにより、パスが正しく設定された通常のhtmlアンカータグ<a>が生成されます。それをクリックすると、aboutコンポーネントに移動し、サーバーからhtml Webページ全体（アプリスクリプトを含む）を更新しません。

ルートコンポーネントのみが変更されると、Vueインスタンスのトークンのような他のすべてのVue paramsが残ります。

vue-routerをご覧ください： http://router.vuejs.org/en/essentials/getting-started.html

次のように、メインアプリにルートのプレースホルダーがあることを忘れないでください：<router-view></router-view>。ルートを変更すると、HomeおよびAboutコンポーネントがこのrouter-viewにレンダリングされます。

2
Mani

this.$router.go(-1)またはvm.$router.go(-1)のようなものを実行して、先に進むことができますthis.$router.go(1)詳細 ここをクリック

17
Kartik Garasia