web-dev-qa-db-ja.com

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

私はVue.jsでVanillaのjavascriptに似たリダイレクトをしたいのですが

window.location.href = 'some_url'

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

vue.jsurl-routingvuejs2vue-router
75
Jimmy Obonyo Abor

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

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

EDIT：router.go()はVueJS 2.0で変更されました。リダイレクトするにはrouter.Push({ name: "yourroutename"})または単にrouter.Push("yourroutename")を使用できます。

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

116
Jeff

ドキュメントによると、router.Pushは好ましい方法のようです。

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

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

FYI：Webpackとコンポーネントのセットアップ、シングルページアプリ（Main.jsを通してルーターをインポートするところ）、私は次のように言ってルーター機能を呼ばなければなりませんでした：

this.$router

例：条件が満たされた後に「Home」という名前のルートにリダイレクトしたい場合：

this.$router.Push('Home')
57
Dave Sottimano

ただ使用する：

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

Vue-routerを使わないでください。そうしないと、 " http://yoursite.com/#!/http://siwei.me "にリダイレクトされます。

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

26
Siwei Shen 申思维

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

this.$router.Push('/url-path')
13
Njeru Cyrus

単なる単純なルーティング：

this.$router.Push('Home');
4
KouchakYazdi

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

router.Push({ name: 'myRoute' })
3
Davod Aslanifakor

たとえば、注文のステータスを更新し、[編集]をクリックしてステータスを更新します。今度は、前のページに戻りたいと思います。

this.$router.Push('../index')

ここで../indexの部分は現在のルートから2回戻ることを意味し、それからindexは行きたいビューの名前です。

一般にそのthis.$router.Push('your_path')

2
Hefaz
window.location = url;

'url'はリダイレクトしたいWeb URLです。

2
Rayees Pk

また、v-bindをテンプレートのように直接使うこともできます。

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

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

1
mEnE

あるページ/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"),

    },
   ]
0
Rakibul Haq
<div id="app">
   <a :href="path" />Link</a>
</div>

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

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

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

0
Bagzie

parent.location.href = 'url'で作業することもできます

0
Wouter Schoofs

Vueルート間を移動するroutes

好ましい方法はrouter.Push(location, onComplete?, onAbort?)です

なぜなら

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

ドキュメントを読む HERE 。

外部URLに移動する

外部ルーティングにVueルーターを使用するのではなく、アプリ内のルーティングのみを処理します。これにはVanilla jsを使用してください。

window.location = 'http://www.example.com';

または

location.replace('http://example.com');

または

window.open('http://example.com');
0
Maxim Shubin