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 router = new VueRouter({routes: [...],linkActiveClass: "类名 1", linkExactActiveClass: "类名 2"
});

（二）声明式导航传参

1. 查询参数传参

• 语法格式为：to="/path?参数名=值"。例如：

<router-link to="/search?words=黑马程序员">搜索</router-link>

• 在对应的页面组件中，可以通过 $route.query.参数名 来接收传递过来的值。

2. 动态路由传参

• 首先需要配置动态路由，例如：

const router = new VueRouter({routes: [{ path: '/search/:words', component: Search }]
});

• 然后配置导航链接为：to="/path/参数值"，如：

<router-link to="/search/黑马程序员">搜索</router-link>

• 在对应的页面组件中，通过 $route.params.参数名 来接收传递过来的值。

这两种传参方式各有特点，查询参数传参比较适合传递多个参数，而动态路由传参则更加优雅简洁，适合传递单个参数。

三、路由重定向、404 与模式设置

（一）路由重定向

当网页打开时，url 默认是 / 路径，如果未匹配到组件就会出现空白。这时可以使用路由重定向来解决这个问题。语法为：{ path: 匹配路径, redirect: 重定向到的路径 }。例如：

const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home }]
});

（二）路由 404

当路径找不到匹配时，我们可以设置一个 404 提示页面。在路由配置中，将 404 页面的路由配置放在最后，语法为：path: "*"（表示任意路径）。且 NotFind 是view中另起一个，不要忘记导包嗷！例如：

const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/', redirect: '/home' },{ path: '/search/:words?', component: Search },{ path: '*', component: NotFind }]
});

（三）路由模式设置

默认的路由模式是 hash 路由，例如：http://localhost:8080/#/home，这种模式下路径看起来会有 #，不太自然。我们可以将其设置为 history 路由（常用），例如：http://localhost:8080/home，但需要注意的是，history 路由在上线时需要服务器端的支持。设置方式如下：

const router = new VueRouter({routes,mode: "history"
});

四、编程式导航

（一）基本跳转

编程式导航是通过 JS 代码来实现路由跳转的，有两种语法：

• path 路径跳转：

this.$router.push('路由路径');
// 或者
this.$router.push({ path: '路由路径' });

这种方式简易方便，适合路径较短的情况。

• name 命名路由跳转：这种方式适合 path 路径较长的场景。首先需要在路由配置中给路由定义一个 name 属性，例如：

const router = new VueRouter({routes: [{ name: 'routeName', path: '/path/xxx', component: XXX }]
});

然后在跳转时使用：

this.$router.push({ name: '路由名' });

（二）路由传参

编程式导航也支持查询参数和动态路由传参，并且对于两种跳转方式（path 路径跳转和 name 命名路由跳转）都适用。

• path 路径跳转传参：
  • query 传参：

this.$router.push('/路径?参数名 1=参数值 1&参数 2=参数值 2');
// 或者
this.$router.push({ path: '/路径', query: { 参数名 1: '参数值 1', 参数名 2: '参数值 2' } });

在接收页面通过 $route.query.参数名 获取参数。

• 动态路由传参（需要配动态路由）：

this.$router.push('/路径/参数值');
// 或者
this.$router.push({ path: '/路径/参数值' });

在接收页面通过 $route.params.参数名 获取参数。

• name 命名路由跳转传参：
  • query 传参：

this.$router.push({ name: '路由名字', query: { 参数名 1: '参数值 1', 参数名 2: '参数值 2' } });

在接收页面通过 $route.query.参数名 获取参数。

• 动态路由传参（需要配动态路由）：

this.$router.push({ name: '路由名字', params: { 参数名: '参数值' } });

在接收页面通过 $route.params.参数名 获取参数。

五、综合案例：面经基础版

（一）配路由

• 配置了首页和面经详情两个一级路由，同时首页内嵌四个可切换页面（嵌套二级路由）。例如：

const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/detail/:id', component: Detail },{path: '/home',component: Home,children: [{ path: 'page1', component: Page1 },{ path: 'page2', component: Page2 },{ path: 'page3', component: Page3 },{ path: 'page4', component: Page4 }]}]
});

（二）实现功能

• 首页请求渲染：在首页组件的生命周期函数中进行数据请求和页面渲染。
• 跳转传参到详情页并渲染：通过路由传参将数据传递到详情页，在详情页组件中接收参数并进行页面渲染。
• 组件缓存：利用 keep-alive 组件来缓存组件，提高性能。例如：

<template><div class="h5-wrapper"><keep-alive><router-view></router-view></keep-alive></div>
</template>

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它有几个重要的属性和钩子函数：

• 属性：
  • include：组件名数组，只有匹配的组件会被缓存。例如：<keep-alive :include="['LayoutPage']">。
  • exclude：组件名数组，任何匹配的组件都不会被缓存。
  • max：最多可以缓存多少组件实例。
• 钩子函数：
  • activated：当组件被激活（使用）的时候触发，即进入页面时触发。例如：

activated () {console.log('actived 激活 ￫ 进入页面');
}

• deactivated：当组件不被使用的时候触发，即离开页面时触发。例如：

deactivated() {console.log('deactived 失活 ￫ 离开页面');
}

通过这些路由进阶知识的学习，我们能够更好地构建 Vue 应用，实现复杂的页面交互和功能。在实际项目中，根据具体需求灵活运用这些知识，能够提升项目的质量和用户体验。