別のページへのVue.jsリダイレクト

Vue.jsバニラのjavascriptのようにリダイレクトを作成したい

window.location.href = 'some_url'

Vue.jsでこれを実現するにはどうすればよいですか？

を使用している場合はvue-router、を使用router.go(path)して特定のルートに移動する必要があります。ルーターは、を使用してコンポーネント内からアクセスできますthis.$router。

それ以外の場合は、window.location.href = 'some url';単一ページ以外のアプリでは正常に機能します。

編集：router.go()VueJS 2.0で変更されました。router.push({ name: "yourroutename"})またはrouter.push("yourroutename")今すぐリダイレクトして使用できます。

https://router.vuejs.org/guide/essentials/named-routes.html

ドキュメントによると、router.pushは推奨される方法のようです：

別のURLに移動するには、router.pushを使用します。このメソッドは新しいエントリを履歴スタックにプッシュするため、ユーザーがブラウザーの戻るボタンをクリックすると、前のURLに移動します。

ソース：https : //router.vuejs.org/en/essentials/navigation.html

参考：Webpackとコンポーネントの設定、単一ページアプリ（Main.jsを介してルーターをインポートする場所）では、次のようにしてルーター関数を呼び出す必要がありました。

this.$router

例：条件が満たされた後に「ホーム」というルートにリダイレクトする場合：

this.$router.push('Home') 

ただ使う：

window.location.href = "http://siwei.me"

vue-routerを使用しないでください。使用すると、「http://yoursite.com/#!/http://siwei.me」にリダイレクトされます

私の環境：ノード6.2.1、vue 1.0.21、Ubuntu。

コンポーネントスクリプトタグの内部では、ルーターを使用して次のようなことができます

this.$router.push('/url-path')

ちょうど死んだ単純なルーティング：

this.$router.push('Home');

これも試すことができます...

router.push({ name: 'myRoute' })

別のページにルーティングする場合 this.$router.push({path: '/pagename'})

paramsでルーティングしたい場合 this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

window.location = url;

'url'は、リダイレクトするWeb URLです。

v-bindをテンプレートに直接使用することもできます...

<a :href="'/path-to-route/' + IdVariable">

これ:はの省略形ですv-bind。

あるページ/aから別のページへの永続的なリダイレクトが必要な場合/b

でredirect:追加されたオプションを使用できますrouter.js。たとえば、ユーザーがルートまたはベースURLを入力したときに、常に別のページにリダイレクトしたい場合は、次のようにします/。

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      redirect: "/someOtherPage",
      name: "home",
      component: Home,
      // () =>
      // import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),

    },
   ]

<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here

だから、私が探していたのはどこに置くべきかということだけでした、window.location.hrefそして私が結論を下したのは、リダイレクトする最善かつ最速の方法はルートにあるということでした（そのようにして、リダイレクトする前に何かがロードされるのを待ちません）。

このような：

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

多分それは誰かを助けるでしょう。

元のリクエストに合わせるには：

window.location.href = 'some_url'

あなたはこのようなことをすることができます：

<div @click="this.window.location='some_url'">
</div>

これはVueのルーターの使用を利用していませんが、「Vue.jsでバニラJavaScriptと同様のリダイレクトを行いたい」場合、これは機能します。