Examples of Vue Router route redirection and alias settings

##Redirection

Example: Redirection refers to when the user accesses

/home , the URL will be replaced by / and then matched to /.

Redirection is also done through

routes configuration. The following example redirects from /home to /:

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

The redirect target can also be a named route:

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

It can also be a method that dynamically returns the redirect target:

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

Alias

will

/ is aliased as /home, which means that when the user accesses /home, the URL is still /home, but will be matched as the user is accessing /.

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

Through aliases, you can freely map the UI structure to an

arbitrary URL, and is not restricted by the configured nested structure. Make the alias start with / so that the path within the nested path becomes an absolute path. You can even combine the two, Use an array to provide multiple aliases:

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

/people is an absolute path, that is, you can directly pass /people to visit.
list is a relative path, that is, the url will be spliced ​​with the parent's path → /users/list.

Note: If the route has parameters, be sure to include them in any absolute aliases:

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },]

[Related recommendations:

vue.js video tutorial】

The above is the detailed content of Examples of Vue Router route redirection and alias settings. For more information, please follow other related articles on the PHP Chinese website!