Vue-路由-常见设置

1. 重定向

1.1 介绍

在Vue应用中，路由管理是至关重要的。当用户访问某个URL时，我们需要确保他们看到正确的页面。有时候，出于各种原因，我们可能需要将用户从一个URL重定向到另一个URL。在Vue Router中，重定向功能非常实用，可以帮助我们轻松实现这一需求。

Vue Router允许我们在路由配置中使用重定向来改变用户的导航路径。这可以通过两种方式实现：全局重定向和组件内的局部重定向。

1. 全局重定向：在全局范围内应用重定向，可以在整个应用中影响路由导航。这通常在应用的路由配置中进行设置。
2. 局部重定向：在特定的路由配置中应用重定向，只影响该特定路由的导航。

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', // 设置路由模式为：history
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'searchcc', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})