1.关于Vue CLI
关于Vue
- Vue. js(读音:/vjuː/, 类似于:view) 是一套构建用户界面的渐进式框 架
- Vue. js的官方网址是:https://cn. vuejs. org/index. html
- 传统的前端开发框架大多是基于DOM(Document Object Model:文档 对象模型)的,在操作时,需要关心被操作的页面元素,甚至这些页面元 素的层级结构,核心思想是:先根据DOM找到对应的页面元素,然后再 进行相关操作,例如设计其样式,或配置某个事件
- Vue则是将必要的页面元素的相关属性(例如页面元素的样式、控件的值、 页面元素的事件等)与数据进行绑定,当实现绑定后,就不再需要关心页 面元素本身了,只需要关心各个数据即可,从而避免了大量繁琐的DOM操作,也实现了页面设计与数据处理的分离
- Vue CLI通常称为“VUE脚手架”,它是一个专门为单页面应用快速搭建 繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue 和webpack的工程模板
- Vue CLI相关文档的官方网址是:https://cli. vuejs. org/zh/guide/
- Vue CLI是由VUE提供的一个官方客户端(client),专门为单页面应用 快速搭建繁杂的脚手架
- 所谓的单页面,指的是在工程中,理论上只有1个HTML页面,只不过这 个页面的所有内容都是可以动态更新的,你随时可以使用新的页面内容替 换原有的内容,并且,你还可以使得URL一并更新,从用户体验上来说, 这种单页面应用与传统的前端应用并没有什么不同
- 需要注意:在使用传统模式开发的前端工程中,各个页面是相对独立的, 甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它,而Vue CLI工程与一个Web应用程序一样,是需要启动服务才可以访问的,一定 程度上,它的上手难度会更大一些,但是在中大型应用程序的开发中,它 在开发效率、管理和维护成本上有更大的优势
- 单页面应用的工程中需要一定的配置,对配置文件的位置也有一定的要求, 整体工程结果并不像传统的前端应用工程那么自由,所以,手动创建这种 应用的成本较大,而Vue CLI则可以自动生成vue. js + webpack的工程模 板,是为现代前端工作流提供了Batteries-included(自含全套工具集) 的构建设置,只需要几分钟的时间甚至更短的时间就可以运行起来。
- 由Vue CLI创建的工程, 默认即是热部 署的,当你启动了这个工程(非打包后 的工程)的服务后,在绝大部分情况下, 修改源代码后并不需要重新启动服务, 即可体验到修改后的内容。
关于npm
- npm的全称是:Node Package Manager,可译为“Node包管理器”。
- 在早期没有npm时,如果需要在前端工程中使用某些框架(例如jQuery、 Bootstrap等),需要找到相关的官网或资源站点,要么下载这些框架的 文件,要么使用cdn在线引用这些文件,其过程相对烦琐,因为这些框架 的具体表现可能不只是一个文件,如果下载,只能下载打包后的文件并自 行解压缩,如果在线引用,则需要自行添加多条源代码进行引用,同时, 是这些框架也是在不停维护和更新的,即使开发人员在本地已经下载过这 些框架文件,当需要新版本的框架时,又需要重新下载,或者上网搜索最 新的cdn引用地址。
- 为了解决这个问题, I s a a c Z . S c h l u e t e r 使用运行在N o d e . j s 之上的 Java Script语言开发了npm,它允许配置一个仓库,I并将大量框架的文 件放在了npm仓库中,并提供了一系列的管理命令,最终,开发人员只需 要使用npm的命令,就可以在线获取到框架文件。通常,框架的文件会自 动的存储到工程目录下,并在工程的配置文件中进行注册,开发人员只需 要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。一定程度上,npm与Maven或Gradle是比较相似的。
2. 搭建开发环境
安装Node.js
- 为了使用npm,首先需要下载Node. js安装包,下载地址可参考:
- https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
- https://mirrors. nju. edu. cn/nodejs/latest- v 16 . x/node- v 16 . 14 . 2 - x 64 . msi
- https://mirrors. tuna. tsinghua. edu. cn/nodejs- release/v 16 . 14 . 2 /node- v 16 . 14 . 2 - x 64 . msi
- Node. js的安装过程没有特别的注意事项,整个安装过程中都可以不必修 改任何内容,直至其自动安装完成
- 此安装包会自动配置环境变量,安装完成后,可检查npm命令是否可用, 在操作系统的命令提示符下执行以下命令即可:
- npm -v
- 执行以上命令后,将显示版本号,例如:
- 注意:你必须在新的命令提示符窗口(安装完Node. js后再打开的窗口) 中运行此命令。
配置npm源
- nmp源(即npm仓库,称之为:registry)默认是境外服务器,在国内 使用时,访问速度较慢,通常,在初次使用时,应该将npm源更换为国内 的服务器地址,例如使用https://registry. npm. taobao. org作为npm源
- 配置npm源的命令如下:
- npm config set registry https://registry.npm.taobao.org
- 当配置成功后,可通过get命令可查看npm源:
- npm config get registry
- 将显示当前生效的npm源,例如:
- 注意:无论你使用哪种操作系统,必须保证当前登录的用户具有最高访问 权限,例如,在Windows操作系统中,请使用管理员模式的命令提示符, 在Mac OS中,请使用sudo来执行以上命令。
安装Vue CLI
- 安装Vue CLI的命令如下:
- npm install -g @vue/cli
- 以上命令中,-g表示全局安装,则当前操作系统中所有用户均可使用,且 自动配置Vue环境变量。
- 此过程将从仓库服务器中下载Vue CLI,通常耗时30秒至5分钟左右。
- 提示:如果安装过程中的日志提示更新npm版本,或提示某些软件版本偏 旧等,均可无视。
- 注意:以上操作仍需要管理权限才可以成功执行。
-安装完成后,可通过以下命令检验Vue CLI是否安装成功: - vue -V
- 注意:以上命令中的-V中的V是大写的。
- 执行以上命令后,将显示当前的Vue CLI版本号,例如:
3. 创建第1个Vue CLI工程
创建工程
- 通常使用Vue的命令来创建Vue CLI工程,并且,此命令会将工程创建在 执行命令时的位置,所以,先在命令提示符窗口中进入Vue Workspace, 例如(以下示例中的#开头是注释,不要执行):
# 切换到D盘
d:
# 创建Vue的Workspace,文件夹名称为Vue-Workspace,是自定义名称
# 如果Vue的Workspace已经存在,则不需要执行接下来这条命令
# 如果使用IntelliJ IDEA开发VUE CLI工程,也可以直接使用IntelliJ IDEA的Workspace, 无强制要求
mkdir Vue-Workspace
# 进入D盘下的Vue-Workspace cd Vue-Workspace
- 当进入Vue Workspace后,就可以创建工程了
- 使用vue create命令即可创建Vue CLI工程,命令格式是:
- vue create 工程名称
- 例如执行:
- vue create vue-project-01
- 输入以上指令后,按下Enter键将准备创建工程,创建过程可能耗时较长,
- 注意:不可反复按Enter键,否则会视为选择各设置选项的默认项
- 创建过程中会有一些选项,最先提示的选项是Please pick a preset,表 示“请选择一个预设项”,推荐选择Manually select features,表示 “手动选择”,通过键盘的上下箭头进行选择,选择到目标项后按下键盘 的Enter键到下一步:
- 接下来的选项是Check the features needed for your project,表示“选择你的工程中需要使用的功能”,推荐在列表中选择Babel、Router、 Vuex这3项,使用键盘的上下箭头移动,使用空格选中或取消选中,选择完成后按下键盘的Enter键到下一步:
- 关于列表中主要的几个功能:
- Babel:ES 6 高级语法向低版本语法兼容的工具
- Router:路由管理器(管理请求路径与页面资源的映射关系,相关于Controller中 @ RequestMapping)
- Vuex:全局状态管理工具(管理全局共享的内存中的数据,例如各页面需要使用到 的用户信息)
- Linter:初学者不建议勾选,是代码规范检验工具,其要求较严格
- 关于列表中主要的几个功能:
- 接下来的选项是Choose a version of Vue. js that you want to start the project with,表示“选择你的工程中希望使用的Vue. js的版本”, 推荐选择2. x这项,选择到目标项后按下键盘的Enter键到下一步:
- 接下来的选项是Use history mode for router,表示“是否在路由中选 择历史模式”,推荐选择“是”,输入Y后按下键盘的Enter键到下一步(提示信息中,Y是大写的,表示它是默认选项,不输入Y而直接按下 Enter键是等效的):
- 接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?,表示“你习惯把一些配置信息存放在哪里?”,推荐选择 In package. json,即存 放在package. json文件中,选择到目标项后按 下键盘的Enter键到下一步:
- 最后的选项是Save this as a preset for future projects?,表示“是否 保存以上配置信息,作为后续将创建的新工程的预设?”,推荐选择“否”,输入N后按下键盘的Enter键(提示信息中,N是大写的,表示它 是默认选项,不输入N而直接按下Enter键是等效的):
- 至此,配置过程已经结束,接下来会自动创建工程,耗时取决于网络速度, 通常需要30秒至5分钟左右
启动服务
- 注意:从现在开始,你可以使用IntelliJ IDEA或类似的开发工具来打开你 的项目,并使用内置的Terminal执行各个命令,使用方式与命令提示符 窗口完全相同,为保证你有足够的权限执行命令,你应该以管理员的身份运行IntelliJ IDEA,否则,后续仍可能出现某些命令无法成功执行的问题。进入工程目录,执行npm run serve命令即可启动此工程的服务(过程中 会编译打包此工程):
- npm run serve
- 当提示以下信息时,表示工程已成功启动:
- 当工程成功启动后,即可根据提示的URL在浏览器中进行访问:
- 如果需要停止服务,在控制台使用Ctrl + C即可
- 提示:当按下Ctrl + C后,会提示" 终止批处理操作吗(Y/N)?",其实,当 按下Ctrl + C后,服务已经被停止,在此提示中无论选择Y或N结果都已经 不重要了
重启服务
- Vue CLI工程启动的服务支持热部署(热更新,即:当保存对源代码的修 改后,会自动重新编译打包并覆盖原本已经启动的服务中的文件),并没 有重启服务的做法,如果在某些场景中需要实现“重启”的效果(例如修 改服务端口等),可以先停止服务,然后再次启动服务
指定服务端口
-
此服务默认占用8080端口,如果端口已经被占用,将自动修改端口为 8081或继续向后递增端口号
-
如需手动修改端口号,在工程根目录下的package. json中修改scripts属 性下serve的值:
- vue-cli-service serve --port 端口号
-
例如改为使用9090端口:
-
则下次启动时会使用新设定的端口号:
-
提示:即使显式的指定了端口号,如果指定的端口仍被其它服务占用,仍会自 动在指定端口号的值的基础上递增,以使用新的端口号!例如显式的指定了使 用9090端口,如果9090被占用且9091可用时,会自动改为使用9091端口。
4. 了解Vue CLI工程
工程结构
- [.idea]:使用IntelliJ IDEA打开工程时会产生此文件夹,其中的文件都 是IntelliJ IDEA管理此工程时将使用到的,不手动管理,即使删除此文件 夹,IntelliJ IDEA也会按需自动创建此文件夹及其下必要的文件
- [node_modules]:工程中使用到的模块,也可以理解为工程的依赖项, 例如Babel、Vue等框架的文件,不手动管理
- 需要注意:如果是从Git或其它位置复制得到的工程,可能没有此文件夹,需要运行 npm install,否则将无此文件夹及其下的各依赖项,工程将无法正常启动
- 本课程提供的资源中,各练习案例也不包含此文件夹,均需要在各工程目录下执行 npm install后才可以正常运行
- [public]:工程被编译打包后仍会保留的内容(文件内容可能会在编译打 包过程中修改)
- 你可以自行在此文件夹下创建子级文件夹,用于存放静态资源,例如图片等
- public/index.html:默认的主页,通常不修改其内容。
- [src]:页面源代码,除工程配置以外的所有开发都在此文件夹下
- [src/assets]:资源文件夹,通常存放图片等
- 注意:仅不需要被程序动态控制的图片放在此处
- [src/components]:视图组件,通常是可以被其它各页面复用的,是各 个. vue文件
- [src/router]:路由控制
- src/router/index.js:路由配置文件,除非工程中页面数量较大,或路 由关系复杂,否则使用这1个文件进行路由管理即可
- [src/store]:全局共享的内存中的数据
- src/store/index.js:暂不关注
- [src/views]:视图组件 ,通常,每个页面在此文件夹都应该有1个对应 的文件,可引用[src/components]下的组件
- src/App.vue:默认的主页视图组件
- src/main.js:工程的主js文件,通常用于导入工程中将使用的其它库
- – 此文件中所有import语句必须在最上方位置,各import语句不区分先后顺序
- .gitigore:用于配置使用Git提交工程时将忽略的文件和文件夹
- bable.config.js:Babel的配置文件,在不熟悉的情况下不要手动修改 此文件的配置
- package.json:工程的管理配置文件,相当于Maven项目的pom. xml, 在不熟悉的情况下不要手动修改此文件的配置,可能需要关注的主要有:
- scripts:支持的2 个npm命令参数,例如npm run serve、npc run build
- dependencies:运行时依赖项
- dev Dependencies:开发依赖项,将不参与打包
- package-lock.json:工程的管理配置文件,在不熟悉的情况下不要手 动修改此文件的配置
- README.md:工程的说明文档,用于开发人员编写如何使用、注意事 项、更新日志等内容,使用IntelliJ IDEA首次打开工程时,会自动打开此 文件,此文件的默认内容中提示了工程的运行命令
- vue.config.js:Vue的配置文件,在不熟悉的情况下不要手动修改此文 件的配置
关于视图组件
- 所有以 . vue 为后缀的都是视图组件,根目录下的App. vue默认代码为:
- 可以看到此文件中主要有2个节点:
- < template> 节点:用于设计页面元素,其内部代码可以是标准HTML代码,也可以 是Vue或其它库(例如Element UI)支持的代码
- < style> 节点:用于定义样式,语法规则与传统前端技术中完全相同
- 需要注意:在必须有且仅有1个直接子节点(通常是
节 点),否则将无法通过编译!
- 反例:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
<div>这是一段错误的演示</div>
</template>
- 当尝试编译打包此工程时,会提示错误:
- 而默认的views/HomeView. vue的源代码如下:
- 另外,在以上views/HomeView. vue文件中,第4行代码为:
- 以上代码是基于其在
关于路由
- Vue CLI应用是单页面的,也就是说,在Vue CLI工程的设计思想中,页 面只有1个,只不过页面中的内容是可以动态调整的,所以,无论是使用 不同的URL进行访问,还是页面中触发某个事件后,虽然用户看到了不同 的页面效果,但是,用户看到的其实永远只是1个页面,只是页同中的内 容不同而已,这也就是视图组件源文件中使用节点设计页面 元素的原因(template释义为:模板)。
- Vue CLI工程使用路由控制 单页面中显示的元素,默认 的router/index. js源代码 如图所示:
- 在此文件中,需要重点关注import语句和routes常量。
- routes常量是一个数组,数组元素是JSON对象,此JSON对象中主要配 置的属性有:
- path:路径,即URL路径,每个JSON对象的此属性值必须是唯一的,Vue将根据用 户访问的URL加载对应的视图组件
- name:名称,可忽略,如果配置此属性,则每个JSON对象的此属性值必须是唯一 的
- component:视图组件,当访问的URL匹配path时,此视图组件将被显示,在配置 此属性的值时,需分析此视图组件是否为动态导入(懒加载)的
- 默认即导入:当客户端首次访问此服务时,就会导入此视图组件,需通过此文件顶部通 过import语句导入,且component属性的值就是import时指定的视图组件名,每个工 程中通过此方式导入的视图组件应该非常少
- 动态导入:取值是使用ES 6 中的import() 返回的Promise对象,相比之下,import语句 是默认即导入的,而import() 函数是动态导入的,以避免客户端首次访问此服务时就加 载了大量的视图组件,每个工程中的绝大部分视图组件都应该是这种方法导入的
- 注意:以上语法格式需要Babel支持,否则将无法正常编译打包
- 提示:此JSON对象还有更多属性配置,将在后续的应用中补充。
运行流程概要
-
在启动服务的过程中,会加载相关配置,例如配置的端口号等
-
此过程通常是无感的,不需要过多关注,只要最终能提示访问此服务的 URL即可视为成功,如果启动服务失败,则会提示错误信息
-
- 默认的主页是public/index. html(单页面应用中也只有这1个页面), 则加载此页面,注意此页面中的
,如下图所示:
- 默认的主页是public/index. html(单页面应用中也只有这1个页面), 则加载此页面,注意此页面中的
,如下图所示:
-
- 根据main. js中的代码,其导入了./App. vue,并在挂载id为app的元素 时使用./App. vue进行渲染,可简单理解为<div id=" app>" 就是 App. vue组件的全部内容
- 根据main. js中的代码,其导入了./App. vue,并在挂载id为app的元素 时使用./App. vue进行渲染,可简单理解为<div id=" app>" 就是 App. vue组件的全部内容
-
- 在App. vue的页面设计中,有
-
- 由于以上第1个节点配置的to属性是/,匹配当前访问的 http://localhost: 8080为根路径的请求,则在/router/index. js中根据/匹 配视图组件,也就是HomeView. vue:
- 由于以上第1个节点配置的to属性是/,匹配当前访问的 http://localhost: 8080为根路径的请求,则在/router/index. js中根据/匹 配视图组件,也就是HomeView. vue:
-
- 所以,当访问http://localhost: 8080时,在App. Vue的 处实际显示的由HomeView渲染的效果,在HomeView. vue中,仅使用标签显示了Vue的logo图片,然后,就通过HelloWorld组件渲染剩 余的部分,并且,在引用HelloWorld组件时,还传入了名为msg的参数:
- 所以,当访问http://localhost: 8080时,在App. Vue的 处实际显示的由HomeView渲染的效果,在HomeView. vue中,仅使用标签显示了Vue的logo图片,然后,就通过HelloWorld组件渲染剩 余的部分,并且,在引用HelloWorld组件时,还传入了名为msg的参数:
-
- 最后,由HelloWorld. vue完成页面中剩余部分的渲染,并通过{{ msg }} 语法将HomeView. vue中传入的" Welcome to Your Vue. js App" 显示在页 面中:
- 最后,由HelloWorld. vue完成页面中剩余部分的渲染,并通过{{ msg }} 语法将HomeView. vue中传入的" Welcome to Your Vue. js App" 显示在页 面中:
-
- 当在浏览器中点击About时,由于配置的节点的to属性是/about,所以,在浏览器的地址栏中可以看到URL变成了 http://localhost: 8080/about:
- 当在浏览器中点击About时,由于配置的节点的to属性是/about,所以,在浏览器的地址栏中可以看到URL变成了 http://localhost: 8080/about:
-
- 由于在router/index. js中配置了/about路径映射的组件是动态导入…/view/AboutView. vue,则此时会由AboutView. vue完成在App. vue 中处的渲染。
- 由于在router/index. js中配置了/about路径映射的组件是动态导入…/view/AboutView. vue,则此时会由AboutView. vue完成在App. vue 中处的渲染。
5. 使用Element UI
关于Element UI
-
Element UI是一套采用 Vue 2. 0 作为基础框架实现的组件库,一套为开 发者、设计师和产品经理准备的基于 Vue 2. 0 的组件库,提供了配套设计 资源,帮助网站快速成型。
-
Element UI的官方网址是:https://element. eleme. cn/
-
简单来说,Element UI预定义了几乎所有标签的常规设计样式,在绝大部分情况下,你不需要考虑例如按钮的宽度、高度、背景颜色、文本大小、 文本颜色等样式规则,只需要直接使用即可,例如Element UI提供的按钮:
-
当然,除了按钮以外,对于表格、表单、表单中各控件、弹出框等常见的 页面元素,Element UI都设计了非常简约美观的样式,例如:
-
Element UI之所以被称之为“组件库”,是因为它不再使用传统的HTML 标签,而是自行定制了一系列的标签(包括 标签属性),以按钮为例, 其源代码大概是这样的:
- 主要按钮
-
除了样式以外,Element UI还提 供了便利的表单控件的验证方式, 执行效果例如:
-
由于Element UI定义了大量的组件,每个组件都有许多属性,所以,学 习Element UI时需要记忆大量的组件特征,这将是一个非常漫长的过程, 通常不建议刻意的死记硬背,应该重点关注Element UI可以做到什么, 例如有哪些样式,各组件的核心属性等用法,然后结合官方文档(https://element. eleme. cn/#/zh-CN/component/)进行开发。
安装Element UI
- 首先进入工程文件夹(如果使用IntelliJ IDEA打开了此工程,直接点击 IntelliJ IDEA下面的Terminal即可):
- cd d:/Vue-Workspace/vue-project-02
- 然后使用npm命令安装Element UI,以下2条命令是等效的(注意:以下 命令区分大小写,例如最后的-S的字母是大写的):
- npm i element-ui -S
- npm install --save element-ui
- 安装完成后,在工程的main. js中导入并使用Element UI:
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 至此,已经可以在工程中使用Element UI了。
7. 使用axios
关于axios
- axios是一个易用、简洁且高效的http库,主要用于发起HTTP请求,并 获取响应的结果。
- axios的官方网址是:http://www. axios-js. com/
- axios的主要特点有:
- 从浏览器中创建 XMLHttpRequests
- 从 node. js 创建 http 请求
- 支 持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
axios基本使用
- 发起GET请求示例:
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) { console.log(response);
})
.catch(function (error) { console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', { params: {
ID: 12345
}
})
.then(function (response) { console.log(response);
})
.catch(function (error) { console.log(error);
});
- 发起POST请求示例:
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'
})
.then(function (response) { console.log(response);
})
.catch(function (error) { console.log(error);
});
更多示例请参考axios官方文档:http://www. axios-js. com/zh- cn/docs/
安装axios
- 与此前的Element UI的安装方式类似,当需要安装axios时,应该先切换 到Vue CLI工程的文件夹下,然后再运行命令以安装axios,安装命令为:
-
npm i axios -S
或: -
npm install --save axios
-
- 安装完成后,也需要在main. js中添加配置,配置代码为:
import axios from 'axios'
Vue.prototype.axios = axios
8. Vue CLI的嵌套路由
关于嵌套路由
- 在实际应用开发中,页面的内容呈现可能存在巨大的差异,例如:
- 由于Vue CLI工程是单页面的,为了保证能显示各式各样的页面,则需要 将页面的整个区域都设计为,然后根据URL不同,加载 不同的视图组件(. vue文件)。
- 但是,即使将整个页面的显示区域作为一个,多个页面 仍可能存在共用的部分,例如:
- 如果要设计为以上风格,则页面中的右侧最大的区域也必须是一个,就会形成最外部(页面所有部分)是 的同时,内部还有一个(右侧的大区域),在配置路由 时,就需要使用到嵌套路由的做法了。
- 当然,如果以上设计风格中右侧区域中仍有各页面均显示的部分,还可以 继续在其内部进行嵌套,通常,并不建议嵌套太多层次。
嵌套路由的使用方式
- 在router/index. js中,传统路由的配置大致是:
const routes = [
{
path: '/', component: HomeView
},
{
path: '/about',
component: () => import('../views/AboutView.vue')
}
];
- 而嵌套路由则需要在原路由的某对象中添加children属性,此属性仍是一 个数组,其内部的配置方式与routes常量是相同的,例如:
const routes = [
{
path: '/admin',
component: () => import('../views/AdminView.vue'), children: [
{
path: 'user/list'
component: () => import('../views/admin/UserListView.vue')
},
{
path: 'user/add-new'
component: () => import('../views/admin/UserAddNewView.vue')
}
]
}
];
- 提示:以上children下的配置中,各path没有使用/作为第1个字符,则 表示在父级路径的基础上增加,例如配置为user/list,由于父级配置了/admin,则完整路径为/admin/user/list。
- 另外,如果希望访问子级嵌套的视图(例如以上/admin对应的视图)时 就打开某个其子级视图(例如以上/admin/user/list对应的视图),在配 置存在子级的视图(例如以上/admin对应的视图)时,还可以添加redirect属性,使其直接重定向到子级视图,例如:
const routes = [
// 省略前序代码
{
path: '/admin',
redirect: '/admim/user/list',
component: () => import('../views/AdminView.vue'), children: [
// 省略子级代码
]
}
];
- 在实际开发时,各 页面的标题栏显示的文本可能是不同的,可通过Vue CLI的路由守卫及元 数据实现,在router/index. js中,配置每个路由信息时,可以添加meta 元数据,在这里设置标题文字,路由守卫可在发生路由跳转时执行特定的 操作,例如全局前置守卫就可以在每次路由跳转之前执行,在此时设置标 题文本即可
- 以上路由守卫的代码为:
router.beforeEach((to, from, next) => { if (to.meta.title) {
document.title = to.meta.title
}
next()
})