Vue开发案例教程-模块2 添加路由功能

Vue开发案例教程模块02·添加路由功能VUEDEVELOPMENTCOURSE本章学习目标路由基础认知理解Vue路由在SPA中的核心地位与特点；掌握路由JS文件的正确引入方式，理解其加载顺序与依赖关系。路由定义与使用熟练掌握Vue路由的核心配置规则，学会定义路由映射表；能够使用<router-link>实现页面导航，使用<router-view>渲染组件。路由模块封装学会将路由配置独立抽离成单独的模块文件；掌握模块化开发思想，提升代码的可维护性、可读性与复用性，适应大型项目开发需求。工匠精神与素养在路由配置与封装的实践过程中，培养严谨的逻辑思维；保持勇于探索、精益求精的工匠精神，逐步建立专业的前端工程化素养。本章内容概览核心概念解析深入理解Vue路由的工作原理，掌握router-link导航组件与router-view视图出口的核心用法。动手实践步骤从零开始配置路由规则，实现单页应用的页面跳转，并结合实战案例完成路由参数的传递与接收演练。知识总结与拓展系统梳理Vue路由的核心知识点，回顾动态路由、嵌套路由等重点内容，并提供拓展练习以巩固和深化所学。PART01核心概念解析CORECONCEPTSANALYSIS核心概念：Vue路由▍基本定义Vue路由（vue-router）是Vue.js官方的路由管理器，它允许用户通过不同URL访问不同内容，从而实现多视图的单页Web应用。router-link标签路由导航标签，页面运行时渲染为<a>标签，通过to属性指定跳转路径。router-view标签路由出口，用于渲染当前URL对应路由规则的模板内容，是内容展示的区域。VueRouter实例通过newVueRouter()创建，配置routes数组定义所有路由规则，是路由系统的核心管理者。💡核心总结：Vue路由就是连接不同URL与对应视图内容的“智能导航系统”。核心概念：路由模块封装核心意义在复杂项目中，将路由相关的模板和逻辑封装到独立的JS文件中，可以有效避免页面代码冗余，提升代码结构清晰度，便于后期维护与复用。实现方式将路由模板与逻辑封装到独立JS文件，通过ES6标准的export导出模块，在主页面通过import导入并使用，实现模块化管理。核心优势逻辑解耦

路由逻辑与页面主逻辑分离，互不干扰高效复用

一次编写，多处复用，减少重复代码易于维护

组件独立管理，单点修改，全局更新PART02动手实践步骤PRACTICESTEPS步骤一：创建路由（基础准备）引入核心JS在HTML文件中引入Vue核心JS文件后，再引入Vue路由JS文件，注意加载顺序。<scriptsrc="js/vue.js"></script>

<scriptsrc="js/vue-router.js"></script>直接定义模板使用const关键字直接在JS中定义路由组件模板，适合内容结构简单的页面场景。constIndex={

template:"<h3>网站首页</h3>"

};Template标签定义通过HTML的<template>标签定义结构，再在JS中通过ID关联，更适合复杂的页面结构。<templateid="tpl">...</template>

constIndex={

template:"#tpl"

};步骤一：创建路由（配置与关联）定义VueRouter实例创建路由实例，并配置routes数组来定义具体的路由规则，包括访问路径(path)和对应的组件(component)。varmyRouter=newVueRouter({

routes:[

{path:"/",redirect:"/index"},

{path:"/index",component:Index},

{path:"/login",component:Login}

]

});核心配置：redirect用于重定向，component关联已定义的页面组件。关联至Vue实例将创建好的路由实例，通过router参数挂载到Vue实例上，使整个应用具备路由功能。//挂载到Vue根实例

varvm=newVue({

el:"#app",

router:myRouter,//注入路由实例

data:{msg:"HelloVueRouter!"}

});生效条件：确保页面中存在<router-view>标签，用于渲染匹配到的组件。步骤一：创建路由（导航与出口）01.设置路由导航使用<router-link>标签创建页面导航链接，它会被渲染为标准的<a>标签，通过to属性指定目标路由地址。<!--导航链接--><router-linkto="/index">网站首页</router-link><router-linkto="/login">会员登录</router-link>02.设置路由出口使用<router-view>标签作为路由的渲染出口，VueRouter匹配到的所有路由组件内容，最终都会展示在这个标签所在的位置。<!--路由出口：组件渲染的位置--><router-view></router-view><!--所有匹配的组件都在这里展示-->步骤一：实战演练-电商外卖系统我们来实现一个电商外卖系统的经典布局，核心功能是实现“商品”、“评论”、“商家”三个子页面的动态切换与路由管理。💡核心实现目标1.使用router-link构建导航菜单，实现路由跳转。2.配置active-class实现导航激活样式高亮。3.配置路由规则，实现不同组件的动态渲染。📝HTML模板结构定义<divclass="menu"><router-linkto="/goods"active-class="active">商品</router-link><router-linkto="/ratings"active-class="active">评论</router-link><router-linkto="/seller"active-class="active">商家</router-link></div><router-view></router-view>⚙️Vue路由组件注册逻辑constgoods={template:"#goods"},ratings={template:"#ratings"},seller={template:"#seller"};varmyRouter=newVueRouter({routes:[{path:"/",redirect:"/goods"},{path:"/goods",c:goods},{path:"/ratings",c:ratings},{path:"/seller",c:seller}]});步骤二：封装路由模块（意义与实现）01/封装路由模块的核心意义在复杂项目开发中，将路由逻辑抽离封装可有效避免页面代码冗余，显著提升整体代码结构的清晰度，极大地方便了后期的功能维护与模块复用。核心目标：逻辑解耦·模块复用·易于维护02/封装单个模块（首页Index示例）以网站首页为例，创建独立的views/index.js文件进行封装。consttpl=`<template><h3>网站首页内容</h3></template>`;

exportconstindex={template:tpl};💡模块导出与使用提示使用export导出模块对象，在主路由配置文件中通过import引入即可挂载。📁src/views/index.js-RouteModule//1.定义模板字符串

constindexTpl=`<div>

<h2>网站首页(IndexPage)</h2>

<p>这是封装后的独立路由组件</p>

</div>`;//2.导出路由配置对象

exportconstIndexPage={

template:indexTpl,

name:'Index'

};路由模块独立封装的代码结构示例步骤二：封装路由模块（导入与使用）在页面中导入模块在主HTML文件中，通过ES6Module的`import`语法，将独立封装好的路由页面模块导入，实现代码的解耦与复用。<scripttype="module">

import{index}from"./views/index.js";

import{login}from"./views/login.js";

</script>核心作用：将页面逻辑拆分到独立JS文件，主文件仅负责组合与配置。电商系统封装实践针对电商系统的复杂页面，将商品、评论、商家详情页分别封装为独立模块，在入口文件统一管理路由规则。//1.封装模块文件

goods.js|ratings.js|seller.js

//2.在index.html中统一导入并配置优化效果：代码结构更清晰，后期维护与页面扩展更便捷。PART03知识总结与拓展CHAPTERSUMMARY&EXPANSION知识小结路由实现流程1.引入路由文件初始化环境2.定义具体的路由模板规则3.创建VueRouter核心实例4.关联实例并配置导航与出口模板定义方式支持直接在JS对象中定义HTML结构内容，快速便捷。或通过HTML中的<template>标签定义，再通过ID关联，结构更清晰。模块封装核心利用export关键字导出模块功能，暴露内部接口。使用import关键字导入外部模块，实现功能复用，大幅提升代码可维护性。扩展练习拓展01/企业网站切换📝核心目标完成企业官网的模块化构建，重点掌握组件封装与路由多页面的配置逻辑。🛠具体步骤在views文