vue でセカンダリのサブルートをデフォルトで表示する方法

Vue.js は、現在最も人気のあるフロントエンド フレームワークの 1 つで、豊富なコンポーネントとルーティング メカニズムを備えているため、複雑な単一ページ アプリケーションを迅速に開発できます。その中でもルーティング メカニズムは Vue.js の重要な部分であり、URL アドレスを通じて対応するコンポーネントにマッピングされ、ネストされたルーティングをサポートします。この記事では、Vue.js でセカンダリ サブルートをデフォルトで表示する方法を検討します。

1. vue-router を使用してルーティングを構成する

Vue.js では、vue-router を使用してルーティングを構成するのは非常に簡単です。まず、基本的な Vue.js プロジェクトを作成し、vue-router をインストールします。

npm install vue-router --save

main.js ファイルに、vue-router をインポートして、次のように登録します。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js ファイルに、ルーティングを構成できます:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
import Profile from './views/Profile.vue'
import Setting from './views/Setting.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      children: [
        {
          path: '',
          name: 'profile',
          component: Profile
        },
        {
          path: 'setting',
          name: 'setting',
          component: Setting
        }
      ]
    }
  ]
})

上記のルーティング構成では、/user パスの下に 2 つのサブルート、/user と /user/setting を構成しました。これらは、それぞれ Profile コンポーネントとsetting コンポーネントに対応します。

2. セカンダリ サブルートのデフォルト表示を設定します

/user パスにアクセスすると、Profile コンポーネントのみが表示され、/user/setting コンポーネントが表示されることがわかりました。デフォルトでは表示されません。 /user/setting コンポーネントをデフォルトで表示したい場合、どのように設定すればよいでしょうか?

ルートのルート ガードで Vue.js を使用して、ルートの変更を監視し、パスが正当であるかどうかを判断できます。正当な場合、URL はリダイレクトされます。

router.js ファイルでは、ルーティング ガードを追加できます:

export default new Router({
  // ...其他配置
  routes: [
    // ...其他路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 判断是否进入 /user 路径
  if (to.path === '/user') {
    // 将路径重定向为 /user/setting
    next({path: '/user/setting'})
  } else {
    // 不需要进入 /user 路径
    next()
  }
})

上記のコードでは、router.beforeEach() メソッドを使用してグローバル ルーティング ガードを登録します。インターセプトに変更します。まず、現在のルーティング パスが /user であるかどうかを確認し、そうである場合は URL を /user/setting にリダイレクトし、それ以外の場合は次のルーティング ステップに直接進みます。

このようにして、デフォルトで第 2 レベルのサブルートを表示する効果が得られます。

概要

Vue.js でデフォルトで表示されるセカンダリ サブルートを設定します。ルーティング ガードでルーティングの変更とリダイレクト パスを監視できます。このようにして、ユーザーが特定のルートにアクセスすると、対応するコンポーネントが自動的に表示され、ユーザー エクスペリエンスが向上します。

以上がvue でセカンダリのサブルートをデフォルトで表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。