Vue 应用里 vue-router 的用法

vue-router 是 Vue.js 的官方路由管理器，它允许你在单页应用（SPA）中通过简单的配置定义路由和页面之间的映射关系。通过使用 vue-router，你可以实现在不同 URL 下加载不同的组件，从而实现页面间的无缝切换，并且可以利用其提供的导航守卫、路由参数、动态路由等功能来实现更丰富的页面控制和交互。

作用

• 实现页面间的导航：通过定义路由规则，可以让用户在单页应用中进行页面之间的切换，而无需重新加载整个页面。
• 管理页面状态：vue-router 可以帮助你管理页面的历史状态，包括浏览历史、路由参数等，从而实现更加复杂的页面逻辑和交互。
• 路由级别的代码分割：可以根据路由进行代码分割，按需加载不同的组件和资源，优化应用的加载性能。
• 权限控制：可以利用导航守卫来控制页面的访问权限，例如验证用户是否登录、是否有权限访问某些页面等。

使用场合

1. 构建单页应用（SPA）：
   vue-router 最常见的使用场景是构建单页应用，通过路由规则管理页面之间的导航关系，从而实现流畅的用户体验。例如，在一个电商网站中，可以使用路由来实现从商品列表页到商品详情页的跳转。

   const router = new VueRouter({
     routes: [
       { path: '/products', component: ProductsList },
       { path: '/products/:id', component: ProductDetails }
     ]
   });

2. 多页应用（MPA）的部分页面使用：
   即使是传统的多页应用，也可能存在部分页面是通过 AJAX 加载的，这时可以使用 vue-router 来管理这部分页面的路由，使其具备 SPA 的特性。例如，在一个企业管理系统中，可以使用路由来管理不同模块的页面。

   const router = new VueRouter({
     routes: [
       { path: '/dashboard', component: Dashboard },
       { path: '/projects', component: ProjectsList }
     ]
   });

3. 组件的嵌套与切换：
   vue-router 支持嵌套路由，可以方便地实现复杂页面结构的管理。例如，在一个社交应用中，可以通过嵌套路由来管理用户个人主页中的动态、相册、关注等子页面。

   const router = new VueRouter({
     routes: [
       { path: '/user/:id', component: UserProfile, children: [
         { path: 'posts', component: UserPosts },
         { path: 'albums', component: UserAlbums },
         { path: 'followers', component: UserFollowers }
       ]}
     ]
   });

4. 页面间传递参数：
   vue-router 允许在路由之间传递参数，从而实现页面间的数据共享。例如，在一个新闻阅读应用中，可以通过路由参数传递新闻的 ID，在新闻详情页中根据 ID 加载相应的内容。

   const router = new VueRouter({
     routes: [
       { path: '/news/:id', component: NewsDetail }
     ]
   });

5. 实现页面级别的权限控制：
   通过导航守卫，可以在路由跳转之前进行权限验证，从而实现页面级别的权限控制。例如，在一个管理后台系统中，可以通过导航守卫来验证用户是否具有访问某个页面的权限。

   router.beforeEach((to, from, next) => {
     if (to.meta.requiresAuth && !isAuthenticated) {
       next('/login');
     } else {
       next();
     }
   });

6. 实现路由级别的代码分割：
   vue-router 可以与 webpack 等构建工具配合，实现路由级别的代码分割，从而优化应用的加载性能。例如，在一个大型应用中，可以根据路由将不同页面的代码拆分成多个 bundle，按需加载。

   const router = new VueRouter({
     routes: [
       { path: '/page1', component: () => import('./Page1.vue') },
       { path: '/page2', component: () => import('./Page2.vue') }
     ]
   });

示例说明

假设我们要开发一个简单的博客应用，其中包含文章列表页、文章详情页和写文章页。

import Vue from 'vue';
import VueRouter from 'vue-router';
import ArticleList from './components/ArticleList.vue';
import ArticleDetail from './components/ArticleDetail.vue';
import WriteArticle from './components/WriteArticle.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: ArticleList },
  { path: '/article/:id', component: ArticleDetail },
  { path: '/write', component: WriteArticle }
];

const router = new VueRouter({
  routes
});

export default router;

在这个示例中，我们首先通过 Vue.use(VueRouter) 安装了 vue-router，然后定义了三个路由规则：

• '/' 表示文章列表页，访问根路径时显示文章列表。
• '/article/:id' 表示文章详情页，使用动态路由参数 :id 来匹配不同的文章。
• '/write' 表示写文章页，用于创建新的文章。

这样一来，用户访问不同的 URL 就可以展示不同的页面内容了。同时，我们也可以通过导航守卫、路由参数等功能来实现更多的页面控制和交互，例如在写文章页中添加权限验证，或者在文章详情页中根据路由参数加载对应的文章内容。

总的来说，vue-router 在 Vue.js 应用中扮演着至关重要的角色，它不仅可以帮助我们管理页面之间的导航关系，还可以实现更加复杂的页面控制和交互，从而为用户提供更好的使用体验。