16第7章Vue脚手架第2节前端路由

第7章：Vue脚手架《Vue应用程序开发》

Part17.1快速构建项目Part27.2前端路由Part37.3服务器端数据访问axiosPart47.4webpack基础目录CONTENTSPart57.5章节案例7.2前端路由在HTML中，传统跳转多使用<a>标签，通过href属性指定目标地址。但<a>标签每次单击都会触发网络请求并刷新页面，而前端路由可实现无刷新跳转——改变URL时不向服务器发送请求，仅通过前端监听URL变化解析路径并渲染对应内容。在Vue中，路由跳转的本质是加载不同的组件，大幅提升了页面切换性能。Vue路由需通过vue-router插件实现，Vue与vue-router版本需严格匹配，Vue3必须搭配vue-router4.x版本，其安装和使用方式包括直接引入CDN、本地引用JavaScript文件、使用NPM安装，以及通过脚手架快速集成路由。7.2前端路由路由是根据不同的url地址展示不同的内容或界面。前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面来实现的，而现在前端路由即实现了“前后端分离”。什么时候使用前端路由？在单页面应用中，保持大部分页面结构不变，只改变部分内容的使用。前端路由有什么优点和缺点？优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户。缺点：（1）不利于SEO搜索引擎；（2）使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；（3）单页面无法记住之前滚动的位置，无法再前进、后退的时候返回之前滚动位置；利用vue-router用来构建SPA跳转——或者this.$router.push({path:''})渲染——（7跳转至界面与8渲染至某个位置二者是配合使用的）7.2前端路由7.2.1路由Vue-router下载、安装和使用

（1）直接引入CDN可以在联网状态下直接引用网上的相关js文件，代码如下：<scriptsrc="/vue@3/dist/vue.global.js"></script><scriptsrc="/vue-router@4.0.15/dist/vue-router.global.js"></script>（2）下载js文件可可以将Vue3和VueRouter4的相关JavaScript文件下载到本地，这样在无网络的情况下也可以使用，建议将相应文件保存至项目的js目录中，代码如下：<scriptsrc="js/vue.js"></script><scriptsrc="js/vue-router.js"></script>7.2.1路由Vue-router下载、安装和使用使用npm要使用路由，需要先安装路由模块，在IDE的Terminal中输入npminstallvue-router@4--save

来安装。安装路由模块以后就可以在项目里使用路由了。在命令行窗口使用npminstallvue-router@4--save指令安装Vue-router，7.2.1路由Vue-router下载、安装和使用配置路由规则vue-router插件安装成功以后，需要定义路由与组件的映射关系。先在src目录中新建router/index.js文件，再在该文件中使用“import”命令导入需要使用的vue-router，代码如下。注意，from后模块的名称中字母都是小写的。import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'./HomeView.vue'7.2.1路由Vue-router下载、安装和使用挂载路由在入口文件src/main.js中，将路由实例注入Vue应用，使所有组件都能使用路由功能，代码如下import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)app.use(router)app.mount('#app')7.2.1路由Vue-router下载、安装和使用在组件中使用路由在根组件src/App.vue中，通过<router-link>定义跳转链接，通过<router-view>指定组件渲染位置，代码如下:7.2.1路由Vue-router下载、安装和使用通过脚手架快速集成路由使用Vue官方脚手架create-vue创建项目时，可以在初始化过程中直接勾选“Router”复选框，这样脚手架会自动完成vue-router的安装、基础配置文件创建及依赖关联，无须手动运行“npminstall”命令，选择路由选项后，项目会自动创建src/router/index.js（路由配置文件），并在入口文件main.js中完成路由挂载，代码如下:7.2.1路由Vue-router下载、安装和使用7.2.2跳转方式

（1）使用<router-link></router-link>在上面实例中我们发现用户如果需要跳转到不同的页面，需要通过修改浏览器地址实现，而在网站里，我们通常是需要通过超级链接的文本或按钮进行跳转，在Vue里是通过<router-link></router-link>渲染为一个<a>标签实现跳转的。例如：<router-linkto="/about">跳转到about</router-link>，to是一个属性，同样可以使用v-bind进行动态设置。如：<router-link:to="{name:'about'}">跳转到about</router-link>7.2.2跳转方式（2）通过事件调用函数<template><div><h1>介绍页</h1><button@click="handleRouter">跳转到user</button></div></template><script>import{useRouter}from'vue-router';exportdefault{setup(){constrouter=useRouter();//定义跳转函数consthandleRouter=()=>{//实现跳转router.push('/user/123');};return{handleRouter};}}</script>7.2.2跳转方式（命名视图）命名视图可为<router-view>组件定义不同的名称，使同一路由能同时渲染多个组件，并按名称匹配到对应的视图位置。其核心是通过路由规则中的components（复数形式）配置多组件，与模板中带name属性的<router-view>组件一一对应，实现“一个路径渲染多个独立组件”的效果。下面通过一个实例来学习命名视图的用法。index.js的参考代码如下。7.2.2跳转方式（命名视图）App.vue的参考代码如下。7.2.2跳转方式（命名视图）page1和page2页面导航分别如图所示。7.2.3编程式导航

除了可以使用<router-link>组件生成<a>标签定义导航链接，还可以通过router实例的push()方法实现导航。这种方式被称为Vue的编程式导航。在Vue组件内部，可以通过$router（Vue实例上挂载的路由实例对象）访问路由实例，因此能直接调用$router.push()方法。该方法会向浏览器的history栈添加一条新的记录，所以当用户单击浏览器中的后退按钮时，会回到上一个访问的URL。因为当单击<router-link>组件时，这个方法会在内部调用，所以单击<router-link:to="...">组件等同于调用router.push()方法。7.2.4路由参数传递与接收该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：//字符串router.push('home')//对象router.push({path:'home'})//命名的路由router.push({name:'user',params:{userId:'123'}})//带查询参数，变成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})注意：params只能用name来引入路由，例如：this.$router.push({path:"/detail",params:{name:'nameValue',code:10011}}