Vue 应用里 vue-router 的用法 - HelloWorld开发者社区

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

作用

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

使用场合

构建单页应用（SPA）：
vue-router 最常见的使用场景是构建单页应用，通过路由规则管理页面之间的导航关系，从而实现流畅的用户体验。例如，在一个电商网站中，可以使用路由来实现从商品列表页到商品详情页的跳转。
```
const router = new VueRouter({
  routes: [
    { path: '/products', component: ProductsList },
    { path: '/products/:id', component: ProductDetails }
  ]
});
```
多页应用（MPA）的部分页面使用：
即使是传统的多页应用，也可能存在部分页面是通过 AJAX 加载的，这时可以使用 vue-router 来管理这部分页面的路由，使其具备 SPA 的特性。例如，在一个企业管理系统中，可以使用路由来管理不同模块的页面。
```
const router = new VueRouter({
  routes: [
    { path: '/dashboard', component: Dashboard },
    { path: '/projects', component: ProjectsList }
  ]
});
```

组件的嵌套与切换：
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 }
    ]}
  ]
});

页面间传递参数：
vue-router 允许在路由之间传递参数，从而实现页面间的数据共享。例如，在一个新闻阅读应用中，可以通过路由参数传递新闻的 ID，在新闻详情页中根据 ID 加载相应的内容。
```
const router = new VueRouter({
  routes: [
    { path: '/news/:id', component: NewsDetail }
  ]
});
```
实现页面级别的权限控制：
通过导航守卫，可以在路由跳转之前进行权限验证，从而实现页面级别的权限控制。例如，在一个管理后台系统中，可以通过导航守卫来验证用户是否具有访问某个页面的权限。
```
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});
```
实现路由级别的代码分割：
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，然后定义了三个路由规则：