Vue进阶之旅：核心技术与页面应用实战(路由进阶)

在 Vue 开发中，路由是一个至关重要的部分，它能够帮助我们构建出复杂且流畅的单页面应用。今天深入学习了 Vue 路由的进阶知识，现在来总结一下所学的重点内容。

一、路由模块封装

在项目中，将路由模块进行抽离是一个很好的实践方式。以前可能所有的路由配置都堆在 main.js 中，这样会使代码变得难以维护。现在我们可以把路由配置单独放在一个文件中，比如在 src/router/index.js 中进行配置。

// 引入 VueRouter
import VueRouter from 'vue-router';
// 引入组件
import Find from './views/Find';
import My from './views/My';
import Friend from './views/Friend';

// 创建 VueRouter 实例
const router = new VueRouter({
   
   
  routes: [
    {
   
    path: '/find', component: Find },
    {
   
    path: '/my', component: My },
    {
   
    path: '/friend', component: Friend }
  ]
});

// 导出 router 实例，以便在 main.js 中使用
export default router;

然后在 main.js 中引入并使用这个路由模块：

import Vue from 'vue';
import App from './App.vue';
// 引入路由模块
import router from './router/index.js';

Vue.use(VueRouter);

new Vue({
   
   
  render: h => h(App),
  router
}).$mount('#app');

这样做的好处是拆分了模块，更利于项目的维护和扩展。

二、声明式导航

（一）导航链接与高亮

vue-router 提供了 router-link 这个全局组件来替代传统的 a 标签。它有两个重要的属性：

• to：用于指定跳转的路径，这是必须要设置的属性，其本质还是实现跳转功能的 a 标签，但使用 to 属性时无需像传统 a 标签那样加 #。例如：

<router-link to="/find">发现音乐</router-link>

• 它默认会提供高亮类名，当路由匹配时会自动给当前导航添加两个类名：
  • router-link-active：用于模糊匹配，例如 to="/my" 可以匹配 /my、/my/a、/my/b 等路径。
  • router-link-exact-active：用于精确匹配，例如 to="/my" 仅可以匹配 /my 路径。

在实际应用中，我们可以根据需求自定义这两个高亮类名，通过在创建 VueRouter 实例时设置 linkActiveClass 和 linkExactActiveClass 属性来实现：

const ro