1. 重定向
1.1 介绍
在Vue应用中,路由管理是至关重要的。当用户访问某个URL时,我们需要确保他们看到正确的页面。有时候,出于各种原因,我们可能需要将用户从一个URL重定向到另一个URL。在Vue Router中,重定向功能非常实用,可以帮助我们轻松实现这一需求。
Vue Router允许我们在路由配置中使用重定向来改变用户的导航路径。这可以通过两种方式实现:全局重定向和组件内的局部重定向。
- 全局重定向:在全局范围内应用重定向,可以在整个应用中影响路由导航。这通常在应用的路由配置中进行设置。
- 局部重定向:在特定的路由配置中应用重定向,只影响该特定路由的导航。
1.2 全局重定向
在全局路由配置中,使用redirect
字段指定目标路径:
const routes = [ { path: '/old-articles', redirect: '/articles' } // 其他路由配置...
];
解析:我们的应用有一个“旧文章”页面,其URL为
/old-articles
。现在将所有对该页面的访问重定向到新的URL结构/articles
。
1.3 局部重定向
在特定的路由配置中,可以使用redirect
字段进行局部重定向:
{ path: '/user/:id', component: UserComponent, redirect: '/user/:id/profile' // 根据用户ID重定向到用户资料页
}
解析:假设有一个老版本的URL结构,需要将其重定向到新版本。我们可以使用Vue Router的
redirect
功能来实现这一需求。
2. 404 页面
作用:
- 当路径找不到匹配时,给个提示页面
位置:
- 配在路由最后
语法:
{ path: '*', component: 对应页面 }
3. 路由模式设置
路由的路径看起来不自然, 有#,能否切成真正路径形式?
- 答:能。
路由模式:
- hash路由(默认) 例如: http://localhost:8080/#/home
- history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)
设置模式:(mode)
// 创建了一个路由对象
const router = new VueRouter({mode: 'history', // 设置路由模式为:historyroutes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'searchcc', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})