Description of the difference between Vue route redirection and alias

Redirect

The redirection is also done through the routes configuration, and the following example redirects the/a to/b:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

The target of redirection can also be a named route:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

Even a method that dynamically returns the redirect target:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
 //  Method receive   Destination route   As a parameter 
 // return  Redirected   String path / Path object 
 }}
 ]
})

Note that navigation guards are not applied to jump routes, but only to their targets. In the following example, adding an beforeEach or beforeLeave guard to the/a route has no effect.

For other advanced usage, please refer to the example.

Alias

"Redirect" means that when the user accesses the/a, URL will be substituted/b, and then the matching route is/b, so what is the "alias"?

The alias for the/a is the/b, which means that when the user accesses the/b, URL remains the/b, but the route match is the/a, just as the user accesses the/a 1.

The corresponding route above is configured as:

const router = new VueRouter({
 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]
})

The "alias" feature allows you to freely map the UI structure to any URL, rather than being constrained by the configured nested routing structure.

Additional knowledge: vue-router Redirection redirect and Alias alias

vue-router is one of the important and commonly used plug-ins of vue framework, which is used for path packaging management of single-page applications. redirect and alias are often used in projects to make "page feint" jumps.

Redirect redirect

As the name implies, this property is used to redirect the page jump path. Simply put, a route is set up, which has its own path, but the redirection jumps to another route.

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld 
  },
  {
   path:'/gohome',
   redirect:'/'
  }
 ]
})

< router-link to="/" > Home < /router-link > |

< router-link to="/gohome" > goHome < /router-link >

For example, the route result of "/gohome" jumps to the "/" root directory route, and the final result is that the page content of both routes is completely identical. Note: The original route path including the browser address bar also changes and is displayed as the redirected path!

Alias alias

In fact, it is to add a "flower name"-a new path to a certain route, so that no matter which path is applied, the page content of the same route will eventually be displayed. Examples:

export default new Router({
 routes: [
  {
   path:'/hi1',
   component:hi1,
   alias:'/Jsxj'
  }
 ]
})

< router-link to="/hi1" > Hi1 < /router-link > |

< router-link to="/Jsxj" > Jsxj < /router-link >

As above, 'router-link' pointing to the alias alias path will jump to the routing page of the path path, and eventually both paths will display the same page content. However, one point different from redirection is that the browser address bar will keep the path of alias unchanged! This may be something that customers often want to see more.

In addition, when redirecting a target route with parameters, the parameter name in the path of the route should be the same as the parameter name of the target route path 1, so that the corresponding parameter value can be passed to the target route.