" などのコードでページ A を設定します; 2. ジャンプ URL を $router に追加します; 3 、 B ページを設定します。コードは "created() {...}"; のようなものです。 4. js コンテンツを変更します。"/> " などのコードでページ A を設定します; 2. ジャンプ URL を $router に追加します; 3 、 B ページを設定します。コードは "created() {...}"; のようなものです。 4. js コンテンツを変更します。">
ホームページ > 記事 > ウェブフロントエンド > vueでページAからページBにジャンプする方法
#この記事の動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。Vue は、ページ A からページ B にジャンプするメソッドを実装します: 1. "
" などのコードでページ A を設定します; 2. リダイレクトされた URL を $router に追加します; 3. ページ B を設定しますcode such as "created() {...}"; 4. js コンテンツを変更します。
vue はどのようにしてページ A からページ B に移動しますか?
vue はインターフェイス A からインターフェイス B にジャンプし、パラメーターを運びます。
最近、インターフェイス A からインターフェイス B にジャンプするためにボタンをクリックする必要があることに遭遇しました。パラメータを持ちます。 次のように要件を実装しました。 ページ:<el-button size="mini" type="success" @click="add" icon="el-icon-plus" round plain>{{$t('common.add')}}</el-button> <el-button type="primary" size="mini" @click="edit" icon="el-icon-edit" plain round>{{ $t('common.edit') }}</el-button>クリック イベント:
add() { this.lockTaskStatus = 'new' this.toLockTaskManagePage()},edit() { this.lockTaskStatus = 'edit' this.toLockTaskManagePage()},toLockTaskManagePage() { this.$router.push({ path: '/taskLockManage', name: 'TaskLockManage', params: { status: this.lockTaskStatus } })}リダイレクトされた URL を $router middle に追加します。 パスの URL の先頭に / が付いている場合はルートディレクトリにあることを意味し、付いていない場合はサブルートであることを示します。 パス パラメーターの組み合わせを通じてパラメーターを渡します。 B ページ:
created() { this.getParams() }, watch: { // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可 $route: 'getParams' }, methods: { getParams() { // 取到路由带过来的参数 const res = this.$route.params.status console.log('getParams', res) }}最後に、router/index.js に登録する必要があります:
{ path: '/taskLockManage', component: Layout, redirect: '/taskManage/index', hidden: true, children: [ { path: 'taskLockManage', component: () => import('@/views/taskManage/taskLockManage'), name: 'TaskLockManage', meta: { title: 'taskLockManage', icon: 'user', noCache: true } } ]}このようにして、ジャンプを実現できます。 (追記: これはこれまでに見つかったより良い方法です。誰かがより良いガイダンスを提供してくれることを願っています。) 関連する推奨事項: 「
vue.js チュートリアル 」
以上がvueでページAからページBにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。