/home , the URL will be replaced by
/ and then matched to
/.
routes configuration. The following example redirects from
/home to
/:
const routes = [{ path: '/home', redirect: '/' }]
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText', redirect: to => { // 方法接收目标路由作为参数 // return 重定向的字符串路径/路径对象 return { path: '/search', query: { q: to.params.searchText } } }, }, { path: '/search', // ... },]
/ 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' }]
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', ''] }, ], },]
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!