Maison > interface Web > Voir.js > Exemples de redirection de route et de paramètres d'alias Vue Router

Exemples de redirection de route et de paramètres d'alias Vue Router

藏色散人
Libérer: 2022-08-10 14:16:00
avant
1847 Les gens l'ont consulté

Redirect

Exemple : La redirection signifie que lorsque l'utilisateur accède à /home, l'URL sera remplacée par / puis mise en correspondance avec /. /home 时,URL 会被 / 替换,然后匹配成 /

重定向也是通过 routes 配置来完成,下面例子是从 /home 重定向到 /

const routes = [{ path: '/home', redirect: '/' }]
Copier après la connexion

重定向的目标也可以是一个命名的路由:

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
Copier après la connexion

也可以是一个方法,动态返回重定向目标:

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

别名

/ 别名为 /home,意味着当用户访问 /home 时,URL 仍然是 /home,但会被匹配为用户正在访问 /

const routes = [{ path: '/', component: Homepage, alias: '/home' }]
Copier après la connexion

通过别名,可以自由地将 UI 结构映射到一个任意的 URL,而不受配置的嵌套结构的限制。使别名以 / 开头,以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来,用一个数组提供多个别名

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

/people 是绝对路径的写法,即可以直接通过 /people 来访问。
list

La redirection se fait également via la configuration routes. L'exemple suivant redirige de /home vers / :

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },]
Copier après la connexion
Cible redirigée Cela peut également être une route nommée : rrreee Il peut aussi s'agir d'une méthode qui renvoie dynamiquement la cible de la redirection :

rrreeeAlias

Alias ​​​​/ vers /home, cela signifie que lorsqu'un utilisateur accède à /home, l'URL est toujours /home, mais sera mise en correspondance comme si l'utilisateur accédait à /. rrreeeAvec les alias, vous pouvez librement mapper la structure de l'interface utilisateur à une 🎜URL arbitraire🎜, et 🎜n'est pas limité par la structure imbriquée configurée🎜. Faites commencer l'alias par / pour que le chemin à l'intérieur du chemin imbriqué devienne un 🎜chemin absolu🎜. Vous pouvez même combiner les deux, 🎜Utilisez un tableau pour fournir plusieurs alias🎜 : 🎜rrreee🎜/people est un chemin absolu, c'est-à-dire que vous pouvez directement transmettre /people accéder.
list est un chemin relatif, c'est-à-dire que l'URL sera associée au chemin du parent → /users/list. 🎜🎜🎜Remarque🎜 : Si l'itinéraire a des paramètres, assurez-vous de les inclure dans tous les alias absolus : 🎜rrreee🎜【Recommandation associée : 🎜tutoriel vidéo vue.js🎜】🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal