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 } ] });
2.多页应用（MPA）的部分页面使用：
即使是传统的多页应用，也可能存在部分页面是通过 AJAX 加载的，这时可以使用 vue-router 来管理这部分页面的路由，使其具备 SPA 的特性。例如，在一个企业管理系统中，可以使用路由来管理不同模块的页面。
const router = new VueRouter({ routes: [ { path: '/dashboard', component: Dashboard }, { path: '/projects', component: ProjectsList } ] });
3.组件的嵌套与切换：
vue-router 支持嵌套路由，可以方便地实现复杂页面结构的管理。例如，在一个社交应用中，可以通过嵌套路由来管理用户个人主页中的动态、相册、关注等子页面。
consconst 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 应用中扮演着至关重要的角色，它不仅可以帮助我们管理页面之间的导航关系，还可以实现更加复杂的页面控制和交互，从而为用户提供更好的使用体验。
