当前位置: 首页 > article >正文

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

文章目录

    • 一、路由模块封装
    • 二、声明式导航
      • (一)导航链接与高亮
      • (二)声明式导航传参
        • 1. 查询参数传参
        • 2. 动态路由传参
    • 三、路由重定向、404 与模式设置
      • (一)路由重定向
      • (二)路由 404
      • (三)路由模式设置
    • 四、编程式导航
      • (一)基本跳转
      • (二)路由传参
    • 五、综合案例:面经基础版
      • (一)配路由
      • (二)实现功能

在 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 实例时设置 linkActiveClasslinkExactActiveClass 属性来实现:

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 应用,实现复杂的页面交互和功能。在实际项目中,根据具体需求灵活运用这些知识,能够提升项目的质量和用户体验。


http://www.kler.cn/a/510618.html

相关文章:

  • 微信小程序-base64加解密
  • 考前64天 学习笔记 - 形成“习惯体系”进行最小启动
  • 6、原来可以这样理解C语言_函数(1/8)函数的概念
  • 挖掘机检测数据集,准确识别率91.0%,4327张原始图片,支持YOLO,COCO JSON,PASICAL VOC XML等多种格式标注
  • tlias部门管理-新增部门-接口开发
  • 《C++11》中的显式虚函数重载:深入理解与应用
  • [JavaScript] 运算符详解
  • 数据结构与算法面试专题——引入及归并排序
  • 欧拉计划 Project Euler 52(重排的倍数) 题解
  • golang标准库path/filepath使用示例
  • Java开发提速秘籍:巧用Apache Commons Lang工具库
  • 深度学习中超参数
  • 基于微信小程序的安心陪诊管理系统
  • 基础入门-传输加密数据格式编码算法密文存储代码混淆逆向保护安全影响
  • 自由能最小化与逍遥游:从心理预期到心灵自在的和谐旅程
  • react中,使用antd的Upload组件上传zip压缩包文件
  • [JavaScript] 深入理解流程控制结构
  • 开发笔记4
  • 二叉搜索树(TreeMapTreeSet)
  • fd与FILE---基础文件IO(关注我,教我写博客 -- 今天带了点颜色)
  • webpack 4 升级 webpack 5
  • 在三维坐标系中通过四阶矩阵实现平移和旋转
  • macos 搭建 ragflow 开发环境
  • 【机器学习:三十四、贝叶斯分类器:原理、方法及应用】
  • STL简述
  • 2025.1.15——四、布尔注入