Vue Router のルート リダイレクトとエイリアス設定の例

リダイレクト

例: リダイレクトとは、ユーザーが

/home (URL) にアクセスすることを指します。は / に置き換えられ、/ と照合されます。

リダイレクトは、

routes 構成によっても行われます。次の例では、/home から / にリダイレクトします。リダイレクト ターゲットは名前付きルートにすることもできます:

const routes = [{ path: '/home', redirect: '/' }]

リダイレクト ターゲットを動的に返すメソッドにすることもできます:

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

Alias

will

/

は

/home というエイリアスが付けられています。これは、ユーザーが /home にアクセスするとき、URL は依然として /home ですが、ユーザーが /home であると一致することを意味します。 / にアクセスします。

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },]

エイリアスを使用すると、UI 構造を

任意の URL に自由にマップできます。 は、構成されたネストされた構造 によって制限されません。ネストされたパス内のパスが 絶対パス になるように、エイリアスを / で始めるようにします。この 2 つを組み合わせることもできます。配列を使用して複数のエイリアスを提供します:

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

/people は絶対パスです。つまり、## を直接渡すことができます。 # /people にアクセスしてください。 list
は相対パスです。つまり、URL は親のパス → /users/list と結合されます。

注

: ルートにパラメータがある場合は、必ず絶対エイリアスにパラメータを含めてください:

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // 为这 3 个 URL 呈现 UserList
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },]

[関連する推奨事項:

vue.js ビデオ チュートリアル

]

以上がVue Router のルート リダイレクトとエイリアス設定の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。