萝岗营销型网站建设,二维码生成器软件下载,网站建设参考网站的说明,wordpress彩色提示框Vue2#xff1a;路由
Date: May 28, 2023 Sum: vue-router基本使用、高级用法 单页面应用程序
概念#xff1a;SPA【Single Page Application】是指所有的功能都在一个html页面上实现
案例#xff1a;
单页应用网站#xff1a; 网易云音乐 https://music.163.com/
多页…Vue2路由
Date: May 28, 2023 Sum: vue-router基本使用、高级用法 单页面应用程序
概念SPA【Single Page Application】是指所有的功能都在一个html页面上实现
案例
单页应用网站 网易云音乐 https://music.163.com/
多页应用网站京东 https://jd.com/
**单页应用 VS 多页面应用 单页应用类网站系统类网站 / 内部网站 / 文档类网站 / 移动端站点
多页应用类网站公司官网 / 电商类网站
特点
单页面应用程序将所有的功能局限于一个 web 页面中仅在该 web 页面初始化时加载相应的资源 HTML、JavaScript 和 CSS。
一旦页面加载完成了SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript 动态地变换 HTML 的内容从而实现页面与用户的交互。
注意SPA它是按需更新的并不是整体更新。因此它需要更加关注访问路径与组件的对应关系
优点
SPA 单页面应用程序最显著的 3 个优点如下
① 良好的交互体验
单页应用的内容的改变不需要重新加载整个页面
获取数据也是通过 Ajax 异步获取
没有页面之间的跳转不会出现“白屏现象”
② 良好的前后端工作分离模式
后端专注于提供 API 接口更易实现 API 接口的复用
前端专注于页面的渲染更利于前端工程化的发展
③ 减轻服务器的压力
服务器只提供数据不负责页面的合成与逻辑的处理吞吐能力会提高几倍
缺点
任何一种技术都有自己的局限性对于 SPA 单页面应用程序来说主要的缺点有如下两个
① 首屏加载慢
可以通过路由懒加载、代码压缩、CDN 加速、网络传输压缩处理
② 不利于 SEO
SSR 服务器端渲染
如何快速创建 vue 的 SPA 项目
vue 官方提供了两种快速创建工程化的 SPA 项目的方式
① 基于 vite 创建 SPA 项目 ② 基于 vue-cli 创建 SPA 项目 总结
概念一个Web网站中只有唯一一个HTML页面所有的功能与交互都在这唯一的一个页面内完成。
特点
1.集中所有功能于单页面中仅在该页面初始化时加载相应的资源。
2.通过JS动态变换页面内容从而实现页面与用户的交互
优点 良好的交互体验 没有页面跳转不会有“白屏”现象 良好的前后端分离模式 前端专注页面渲染更利于前端工程化发展后端专注提供API接口更易实现API接口复用 减轻服务端的压力 服务器只提供数据不负责页面的合成与逻辑吞吐能力提高几倍
缺点 首屏加载慢 可以通过代码压缩、CDN加速、路由懒加载、网络传输压缩处理等 不利于SEO SSR服务器端渲染 前端路由的概念与原理
思考
单页面应用程序之所以开发效率高性能好用户体验好
最大的原因就是页面按需更新 比如当点击【发现音乐】和【关注】时只是更新下面部分内容对于头部是不更新的
要按需更新首先就需要明确访问路径和 组件的对应关系
访问路径 和 组件的对应关系如何确定呢 路由 路由概念
概念路由英文router就是对应关系。路由分为两大类 ① 后端路由 ② 前端路由
回顾后端路由
后端路由指的是请求方式、请求地址与 function 处理函数之间的对应关系。
在 node.js 课程中express路由的基本用法如下 前端路由
SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面所有组件的展示与切换都在这唯一的一个页面内完成。此时不同组件之间的切换需要通过前端路由来实现。
结论在 SPA 项目中不同功能之间的切换要依赖于前端路由来完成
概念Vue中的路由指 路径 与 组件 的映射关系根据路由就能知道不同路径应匹配渲染相应组件
通俗易懂的概念Hash 地址与组件之间的对应关系。
我们点击不同的链接会切换不同的哈希地址。当哈希地址切换页面上就会展示对应组件。
工作方式
① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中 结论前端路由指的是 Hash 地址与组件之间的对应关系
实现简易的前端路由
步骤1导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下
import MyHome from ./MyHome.vue
import MyAbout from ./MyAbout.vue
import MyMovie from ./MyMovie.vueexport default {components: {MyHome, MyMovie, MyAbout,},
}步骤2通过 标签的 is 属性动态切换要显示的组件。示例代码如下
templatedivh1App.vue/h1component :iscomNameThis is a test/component/div
/templateexport default {data() {return {comName: MyName, // 要展示的组件的名称}},
}步骤3在组件的结构中声明如下 3 个 链接通过点击不同的 链接切换浏览器地址栏中的 Hash 值
a href#/homeHome/anbsp;
a href#/movieMovie/anbsp;
a href#/aboutAbout/a步骤4在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化动态切换要展示的组件的名称
window.onhashchange () {switch(location.hash) {case #/home: // 点击了“首页”的链接this.comName my-homebreakcase #/movie: // 点击了“电影”的链接this.comName my-moviebreakcase #/about: // 点击了“关于”的链接this.comName my-aboutbreak}}
},Code: App.vue templatedivh1App.vue/h1a href#/homeHome/anbsp;a href#/movieMovie/anbsp;a href#/aboutAbout/anbsp;hr /component :iscomNameThis is a test/component/div
/templatescript
import MyHome from ../01.easy-router/MyHome.vue
import MyAbout from ../01.easy-router/MyAbout.vue
import MyMovie from ../01.easy-router/MyMovie.vueexport default {name: MyApp,data() {return {comName: MyName,}},components: {MyHome, MyMovie, MyAbout,},created() {window.onhashchange () {switch(location.hash) {case #/home: // 点击了“首页”的链接this.comName my-homebreakcase #/movie: // 点击了“电影”的链接this.comName my-moviebreakcase #/about: // 点击了“关于”的链接this.comName my-aboutbreak}}},}
/scriptstyle langscss scoped
/stylevue-router 的基本使用
基础概念
概念
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用能够轻松的管理 SPA 项目中组件的切换。
作用修改地址栏路径时切换显示匹配的组件
版本
vue-router 目前有 3.x 的版本和 4.x 的版本。其中
vue-router 3.x 只能结合 vue2 进行使用
vue-router 4.x 只能结合 vue3 进行使用
vue-router 3.x 的官方文档地址https://router.vuejs.org/zh/ vue-router 4.x 的官方文档地址https://next.router.vuejs.org/
补充官网https://v3.router.vuejs.org/zh/
说明Vue 官方的一个路由插件是一个第三方包 VueRouter 3.x的使用52
固定5个固定的步骤不用死背熟能生巧
1-下载 VueRouter 模块到当前工程版本3.6.5
yarn add vue-router3.6.5
npm install vue-router3.6.52-main.js中引入VueRouter
import VueRouter from vue-router3-安装注册
Vue.use(VueRouter)4-创建路由对象
const router new VueRouter()5-注入将路由对象注入到new Vue实例中建立关联
new Vue({render: h h(App),router:router
}).$mount(#app)当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了 案例
main.js
// 路由的使用步骤 5 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中建立关联import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter()new Vue({render: h h(App),router
}).$mount(#app)**两个核心步骤:
1-创建需要的组件 (views目录)配置路由规则 2-配置导航配置路由出口(路径匹配的组件显示的位置)
代码中的router-view是用来匹配导航栏的位置的如果它在代码的上/下面那么导航栏也在上/下面
如下图所示 App.vue
div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div案例 Code: main.js import Vue from vue
import App from ./App.vueVue.config.productionTip falseimport Find from ./views/Find
import My from ./views/My
import Friend from ./views/Friendimport VueRouter from vue-router
Vue.use(VueRouter)
const router new VueRouter({// routes 路由规则们// route 一条路有规则 { path: 路径 component: 组件}routes: [{ path: /find, component: Find},{ path: /my, component: My},{ path: /friend, component: Friend},]
})Vue.config.productionTip falsenew Vue({render: h h(App),router,
}).$mount(#app)App.vue templatedivdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口匹配的组件所展示的位置 --router-view/router-view/div/div
/templatescript
export default {};
/scriptstyle
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
/stylevue-router 4.x的基本使用步骤
vue-router 4.x 的基本使用步骤
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
3.1 在项目中安装 vue-router
在 vue3 的项目中只能安装并使用 vue-router 4.x。安装的命令如下
npm install vue-routernext -S注意包名会被注册在package.json的dependencies里面在生产环境下这个包的依赖依然存在。
3.2 定义路由组件
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件将来要使用 vue-router 来控制它们的展示与切换
MyAbout, 其余同理
templateh3MyAbout/h3
/templatescript
export default {name: MyAbout
}
/scriptstyle/style3.3 声明路由链接和占位符
可以使用 标签来声明路由链接并使用 标签来声明路由占位符。
示例代码如下:
templatedivh1MyApp/h1!-- 声明路由链接 --router-link to/home首页/router-linknbsp;router-link to/movie电影/router-linknbsp;router-link to/about关于/router-linkhr /!-- 路由的占位符 --router-view/router-view/div
/template注意在声明哈希属性时需要用to属性来声明而且哈希地址不再需要以#开头vue中的router会自动为我们添加#。
3.4 创建路由模块
在项目中创建 router.js 路由模块在其中按照如下 4 个步骤创建并得到路由的实例对象
① 从 vue-router 中按需导入两个方法 ② 导入需要使用路由控制的组件 ③ 创建路由实例对象 ④ 向外共享路由实例对象 ⑤ 在 main.js 中导入并挂载路由模块
从 vue-router 中按需导入两个方法
// 1. 从 vue-router 中按需导入两个方法
// createRouter 方法用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式hash模式
import { createRouter, createWebHashHistory } from vue-router导入需要使用路由控制的组件
//2. 导入组件这些组件将要以路由的方式来控制它们的切换
import MyHome from ./MyHome.vue
import MyMoive from ./MyMoive.vue
import MyAbout from ./MyAbout.vue创建路由实例对象
// 3. 创建路由实例对象
const router createRouter({// 3.1 通过 history 属性指定路由的工作模式history: createWebHashHistory(),// 3.2 通过 routes 数组指定路由规则routes: [// path 是 hash 地址 component 是要展示的组件{ path: /home, component: Home },{ path: /movie, component: Movie },{ path: /about, component: About },]
})向外共享路由实例对象
// 4. 向外共享路由实例对象
// 供其他模块导入并使用
export default router在 main.js 中导入并挂载路由模块
import { createApp } from vue
import App from ./components/App.vue
import ./index.css// 1. 导入路由模块
import router from ./components/02.start/router
const app createApp(App)// 2. 挂载路由模块
// app.use() 方法用来挂载“第三方的插件模块”
app.use(router)app.mount(#app)效果 整体流程:
当我们点击电影时地址栏会切换成 #/movie当哈希地址发生变化就会被路由模块所监听到然后进行哈希地址的匹配
// router.js
routes: [// path 是 hash 地址 component 是要展示的组件{ path: /home, component: MyHome },{ path: /movie, component: MyMovie },{ path: /about, component: MyAbout },]当匹配到我们就会把相应的组件比如MyMovie放到App.vue中的路由占位符中
// App.vue
templatedivh1MyApp/h1!-- 声明路由链接 --router-link to/home首页/router-linkrouter-link to/movie电影/router-linkrouter-link to/about关于/router-linkhr /!-- 路由的占位符 --router-view/router-view/div
/template组件的存放目录问题
注意 .vue文件 本质无区别
组件分类
.vue文件分为2类都是 .vue文件本质无区别
页面组件 配置路由规则时使用的组件复用组件多个组件中都使用到的组件 存放目录
分类开来的目的就是为了 更易维护 src/views 文件夹页面组件 - 页面展示 - 配合路由用 src/components 文件夹复用组件 - 展示数据 - 常用于复用 路由的封装抽离
问题所有的路由配置都在main.js中合适吗
目标将路由模块抽离出来。 好处拆分模块利于维护 路径简写
脚手架环境下 指代src目录可以用于快速引入组件
具体书写
index.js
import Find from /views/Find
import My from /views/My
import Friend from /views/Friend// 1. 导入Vue
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)
const router new VueRouter({// routes 路由规则们// route 一条路有规则 { path: 路径 component: 组件}routes: [{ path: /find, component: Find},{ path: /my, component: My},{ path: /friend, component: Friend},]
})// 2. 导出
export default routermain.js
import Vue from vue
import App from ./App.vue
// 3. 导入 router
import router from ./router/indexVue.config.productionTip falsenew Vue({render: h h(App),router,
}).$mount(#app)App.vue
templatedivdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口匹配的组件所展示的位置 --router-view/router-view/div/div
/templatescript
export default {};
/scriptstyle
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
/style声明式导航
导航链接
需求实现导航高亮效果 如果使用a标签进行跳转的话需要给当前跳转的导航加样式同时要移除上一个a标签的样式太麻烦
**解决方案
vue-router 提供了一个全局组件 router-link (取代 a 标签)
能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式 语法 发现音乐
divdiv classfooter_wraprouter-link to/find发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friend朋友/router-link/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div
/div通过router-link自带的两个样式进行高亮
使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
代码 Code: App.vue templatedivdiv classfooter_wraprouter-link to/find发现音乐/router-linkrouter-link tofriend我的音乐/router-linkrouter-link tomy我的朋友/router-link/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div/div
/templatescript
export default {};
/scriptstyle
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a.router-link-active {background-color: purple;
}
.footer_wrap a:hover {background-color: #555;
}
/style两个类名
当我们使用跳转时自动给当前导航加了两个类名 router-link-active
模糊匹配用的多
to“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to/my匹配到
router-link-exact-active
精确匹配
to“/my” 仅可以匹配 /my
在地址栏中输入二级路由查看类名的添加 理解即使地址栏后面加上了 /one 也就是所谓的二级地址我们通过模糊匹配router-link-active
也能够让他变色。 自定义类名
问题router-link的两个高亮类名 太长了我们希望能定制怎么办
解决方案
我们可以在创建路由对象时额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass
const router new VueRouter({routes: [...],linkActiveClass: 类名1,linkExactActiveClass: 类名2
})详细操作过程
Style:
.footer_wrap a.router-link-active {background-color: purple;
}经过main.js配置过后
const router new VueRouter({// routes 路由规则们// route 一条路由规则 { path: 路径, component: 组件 }routes: [{ path: /find, component: Find },{ path: /my, component: My },{ path: /friend, component: Friend },],// link 自定义高亮linkActiveClass: active,linkExactActiveClass: exact-active
})style可以简化成如下
.footer_wrap a.active {background-color: purple;
}跳转传参
目标在跳转路由时进行传参 比如当在搜索页点击了热门搜索链接跳转到详情页要把点击的内容带到详情页该怎么办呢
**跳转传参
我们可以通过两种方式在跳转的时候把所需要的参数传到其他页面中
查询参数传参动态路由传参
**查询参数传参
如何传参 如何接受参数固定用法 $router.query.参数名
案例 Code: Home.vue templatediv classhomediv classlogo-box/divdiv classsearch-boxinput v-modelinpValue typetextbutton clickgoSearch搜索一下/button/divdiv classhot-link热门搜索router-link to/search/黑马程序员?keytest黑马程序员/router-linkrouter-link to/search/前端培训前端培训/router-linkrouter-link to/search/如何成为前端大牛如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic,data() {return {inpValue: ,}},methods: {goSearch() {this.$router.push(/search${this.inpValue})}}
}
/scriptstyle
.logo-box {height: 150px;background: url(/assets/logo.jpeg) no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
/styleSearch.vue templatediv classsearchp搜索关键字: {{ $route.query.key }}/pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
/scriptstyle
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
/style注意如果在像created这种的js代码中不要忘记加上this. 动态路由传参方式
配置动态路由步骤
1-配置动态路由
动态路由后面的参数可以随便起名但要有语义
index.js
const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
})2-配置导航链接
Home.vue
to/path/参数值3-对应页面组件接受参数
Search.vue
{{ $route.params.参数名 }}params后面的参数名要和动态路由配置的参数保持一致
案例 Code: index.js import Home from /views/Home
import Search from /views/Search
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({routes: [{ path: /home, component: Home },// *** 1, 配置动态路由{ path: /search/:words, component: Search }]
})export default routerHome.vue // *** 2, 配置导航链接
router-link to/search/letstryVue-test/router-linkSearch.vue templatediv classsearch!-- *** 3 对应页面组件接收参数 --p搜索关键字: {{ $route.params.words }}/pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
/scriptstyle
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
/style查询参数传参 VS 动态路由传参
查询参数传参 (比较适合传多个参数) 跳转to“/path?参数名值参数名2值”获取$route.query.参数名 动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: “/path/:参数名”跳转to“/path/参数值”获取$route.params.参数名
注意动态路由也可以传多个参数但一般只传一个 动态路由参数的可选符(了解)
问题配了路由 path:“/search/:words” 为什么按下面步骤操作会未匹配到组件显示空白 原因/search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符
const router new VueRouter({routes: [...{ path: /search/:words?, component: Search }]
})Vue路由
重定向
**问题**网页打开时 url 默认是 / 路径未匹配到组件时会出现空 解决方案重定向 → 匹配 / 后, 强制跳转 /home 路径
语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如
{ path:/ ,redirect:/home }代码
const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})404
**作用**当路径找不到匹配时给个提示页面
位置404的路由虽然配置在任何一个位置都可以但一般都配置在其他路由规则的最后面
**语法**path: “*” (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})模式设置
问题
路由的路径看起来不自然, 有#能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
理解
1-hash模式底层是由a标签锚链接实现的
2-history模式由新增的HTML5中的historyAPI实现
语法
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})注意一旦采用了 histroy 模式地址栏就没有 # 需要后台配置访问规则 两种路由跳转方式
两种路径直接跳转
**问题**点击按钮跳转如何实现 **方案**编程式导航用JS代码来进行跳转
语法
两种语法
path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景)
path路径跳转语法
特点简易方便
Home.vue
//简单写法
this.$router.push(路由路径)
//eg
this.$router.push(/search${this.inpValue})//完整写法
this.$router.push({path: 路由路径
})代码 Code: Home.vue中的script export default {name: FindMusic,methods: {goSearch() {// Plan1: 简易写法// this.$router.push(/search)// Plan2: 完整写法this.$router.push({path: /search})}}
}**name命名路由跳转
特点适合 path 路径长的场景
语法
路由规则必须配置name配置项
index.js
{ name: 路由名, path: /path/xxx, component: XXX },通过name来进行跳转
Home.vue
this.$router.push({name: 路由名
})理解给routes下的route起别名方便自己之后push路径
代码演示通过name命名路由跳转: Code: index.js { name: test, path: /search, component: Search}Home.vue export default {name: FindMusic,methods: {goSearch() {this.$router.push({name: search,})}}
}问题点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现 **两种传参方式
1.查询参数
2.动态路由传参 path路径跳转传参
传参
两种跳转方式对于两种传参方式都支持① path 路径跳转传参 ② name 命名路由跳转传参
**path路径跳转传参query传参
//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})接受参数的方式依然是$route.query.参数名
举例
Home.vue
goSearch() {this.$router.push({path: /search,query: {p1: this.inpValue,}})
}Search.vue
p搜索关键字: {{ $route.query.p1 }}/p**path路径跳转传参动态路由传参
index.js 先在index中写出动态路由
{ path: /search/:words, component: Search },Home.vue
//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})Search.vue 接受参数的方式依然是$route.params.参数值
p搜索关键字: {{ $route.params.words }}/p**注意**path不能配合params使用 name命名路由传参
1.name 命名路由跳转传参 (query传参)
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})案例
index.js
{ name: test, path: /search, component: Search}Home.vue
goSearch() {this.$router.push({name: test,query: {key: this.inpValue}})
}Search.vue
p搜索关键字: {{ $route.query.key }}/p2.name 命名路由跳转传参 (动态路由传参)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})案例
index.js
{ name: test, path: /search/:words, component: Search}Home.vue
goSearch() {this.$router.push({name: test,params: {words: this.inpValue}})
}Search.vue
p搜索关键字: {{ $route.params.words }}/p总结
编程式导航如何跳转传参
1.path路径跳转
—query传参
this.$router.push(/路径?参数名1参数值1参数2参数值2)
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})—动态路由传参
this.$router.push(/路径/参数值)
this.$router.push({path: /路径/参数值
})query与动态路由的区别前者适合传多个参数后者适合传入单个参数
2.name命名路由跳转
query传参
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})动态路由传参 (需要配动态路由)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})path路径跳转和name命名路由跳转区别前者简易方便后者适合path路径长的场景 面经基础版本-案例效果分析
效果与功能分析
面经效果演示 功能分析
1-配路由
首页 和 面经 详情两个一级路由
首页内嵌四个可切换页面嵌套二级路由
2-实现功能
首页请求渲染
跳转传参 到 详情页详情页渲染
组件缓存优化性能 一级路由配置
1.把文档中准备的素材拷贝到项目中
2.针对router/index.js文件 进行一级路由配置
...
import Layout from /views/Layout.vue
import ArticleDetail from /views/ArticleDetail.vue
...const router new VueRouter({routes: [{path: /,component: Layout},{path: /detail,component: ArticleDetail}]
})二级路由配置
二级路由也叫嵌套路由当然也可以嵌套三级、四级…
1.使用场景
当在页面中点击链接跳转只是部分内容切换时我们可以使用嵌套路由
2.语法
在一级路由下配置children属性即可配置二级路由的出口
1.在一级路由下配置children属性
注意:一级的路由path 需要加 /
const router new VueRouter({routes: [{path: /,component: Layout,children:[//children中的配置项 跟一级路由中的配置项一模一样 {path:xxxx,component:xxxx.vue},{path:xxxx,component:xxxx.vue},]}]
})技巧二级路由应该配置到哪个一级路由下呢
这些二级路由对应的组件渲染到哪个一级路由下children就配置到哪个路由下边
2.配置二级路由的出口
注意 配置了嵌套路由一定配置对应的路由出口否则不会渲染出对应的组件
Layout.vue
templatediv classh5-wrapperdiv classcontentrouter-view/router-view/div..../div
/templateCode: index.js import Vue from vue
import VueRouter from vue-router;
import Layout from /views/Layout
import Article from /views/Article
import Collect from /views/Collect
import Like from /views/Like
import User from /views/User
import ArticleDetail from /views/ArticleDetail
Vue.use(VueRouter)const router new VueRouter({// article 路径 - Article 组件// 通过 children 配置项可以配置嵌套路由// 1. 在 children 配置项中配规则// 2. 准备二级路由出口routes: [{path: /,component: Layout,children: [{path: /article,component: Article,},{path: /collect,component: Collect,},{path: /like,component: Like,},{path: /user,component: User,},]},{path: /detail,component: ArticleDetail}]
})export default routerLayout.vie templatediv classh5-wrapperdiv classcontent!-- 二级路由出口匹配到的二级路由组件就会展示 --router-view/router-view/divnav classtabbara href#/article面经/aa href#/collect收藏/aa href#/like喜欢/aa href#/user我的/a/nav/div
/templatescript
export default {name: LayoutPage,
}
/scriptstyle
body {margin: 0;padding: 0;
}
/style
style langless scoped
.h5-wrapper {.content {margin-bottom: 51px;}.tabbar {position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;background: #fff;border-top: 1px solid #e4e4e4;a {flex: 1;text-decoration: none;font-size: 14px;color: #333;-webkit-tap-highlight-color: transparent;}}
}
/style二级导航高亮
实现思路
将a标签替换成 组件配置to属性不用加 #结合高亮类名实现高亮效果 (推荐模糊匹配router-link-active)
代码实现
Layout.vue
nav classtabbarrouter-link to/article面经/router-linkrouter-link to/collect收藏/router-linkrouter-link to/like喜欢/router-linkrouter-link to/user我的/router-link
/nav---------------------------a.router-link-active {color: orange
}Code: templatediv classh5-wrapperdiv classcontent!-- 二级路由出口匹配到的二级路由组件就会展示 --router-view/router-view/divnav classtabbarrouter-link to/article面经/router-linkrouter-link to/collect收藏/router-linkrouter-link to/like喜欢/router-linkrouter-link to/user我的/router-link/nav/div
/templatescript
export default {name: LayoutPage,
}
/scriptstyle
body {margin: 0;padding: 0;
}
/style
style langless scoped
.h5-wrapper {.content {margin-bottom: 51px;}.tabbar {position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;background: #fff;border-top: 1px solid #e4e4e4;a {flex: 1;text-decoration: none;font-size: 14px;color: #333;-webkit-tap-highlight-color: transparent;}a.router-link-active {color: orange}}
}
/style首页请求渲染
1.步骤分析
1.安装axios
2.看接口文档确认请求方式请求地址请求参数
3.created中发送请求获取数据存储到data中
4.页面动态渲染
2.代码实现
1.安装axios
yarn add axios npm i axios2.接口文档
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get3.created中发送请求获取数据存储到data中
data() {return {articelList: [],}
},
async created() {const { data: { result: { rows } }} await axios.get(https://mock.boxuegu.com/mock/3083/articles)this.articelList rows
},4.页面动态渲染
templatediv classarticle-pagediv classarticle-item v-foritem in articelList :keyitem.iddiv classheadimg :srcitem.creatorAvatar alt /div classconp classtitle{{ item.stem }}/pp classother{{ item.creatorName }} | {{ item.createdAt }}/p/div/divdiv classbody{{item.content}}/divdiv classfoot点赞 {{item.likeCount}} | 浏览 {{item.views}}/div/div/div
/template查询参数传参
1.说明
跳转详情页需要把当前点击的文章id传给详情页获取数据
查询参数传参 this.$router.push(‘/detail?参数1参数值参数2参数值’)动态路由传参 先改造路由 在传参 this.$router.push(‘/detail/参数值’)
2.查询参数传参实现
关键点
1-点击跳转文章详情
Article.vue
click$router.push(/detail?id${item.id})2-实现返回上一级采用 $router.back() ArticleDetail.vue
nav classnavspan click$router.back() classbacklt;/span 面经详情/nav动态路由传参
1.实现步骤
改造路由动态传参在详情页获取参数
2.代码实现
改造路由
router/index.js
3.额外优化功能点-点击回退跳转到上一页 详情页渲染
1.实现步骤分析
导入axios查看接口文档在created中发送请求页面动态渲染
2.代码实现
接口文档
请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
请求方式: get这里id走的是动态参数
关键
优化空白界面 问题在跳转页面的过程中有空白浏览量和点赞等空白界面
原理在请求和响应中间不让template先去加载空的article对象
解决方案
在 article.id 存在之后再去做页面渲染
div classarticle-detail-page v-ifarticle.id-----------------------------------------------------data() {return {article: {},}
},Code: ArticleDetail.vue templatediv classarticle-detail-page v-ifarticle.idnav classnavspan click$router.back() classbacklt;/span 面经详情/navheader classheaderh1{{ this.article.stem }}/h1p{{ this.article.createdAt }} | {{ this.article.views }} 浏览量 | {{ this.article.likeCount }} 点赞数/ppimg:srcthis.article.creatorAvataralt/span{{ this.article.creatorName }}/span/p/headermain classbody{{ this.article.content }}/main/div
/templatescript
import axios from axios
// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
export default {name: ArticleDetailPage,data() {return {article: {},}},async created() {const id this.$route.query.idconst { data } await axios.get(https://mock.boxuegu.com/mock/3083/articles/${id})// console.log(data);this.article data.result},
}
/scriptstyle langless scoped
.article-detail-page {.nav {height: 44px;border-bottom: 1px solid #e4e4e4;line-height: 44px;text-align: center;.back {font-size: 18px;color: #666;position: absolute;left: 10px;top: 0;transform: scale(1, 1.5);}}.header {padding: 0 15px;p {color: #999;font-size: 12px;display: flex;align-items: center;}img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}}.body {padding: 0 15px;}
}
/style缓存组件
问题
从面经列表 点到 详情页又点返回数据重新加载了 → 希望回到原来的位置 原因
当路由被跳转后原来所看到的组件就被销毁了会执行组件内的beforeDestroy和destroyed生命周期钩子重新返回后组件又被重新创建了会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子所以数据被加载了 **解决方案**利用keep-alive把原来的组件给缓存下来
keep-alive
概念它是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
优点
在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM
减少加载时间及性能消耗提高用户体验性。
keep-alive的三个属性
① include 组件名数组只有匹配的组件会被缓存
② exclude 组件名数组任何匹配的组件都不会被缓存
③ max 最多可以缓存多少组件实例
案例
对Layout页面进行缓存 如右边红框所示当我们拉到这个位置时再点击‘前端小白’这篇文章然后退回来会发现拖动条仍然在这个位置。 原理被缓存的组件会多两个生命周期
额外的两个生命周期钩子keep-alive的使用会触发两个生命周期函数
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子帮我们实现业务需求。
理解
如下图所示当我们为 Layout 组件的生命周期钩子绑定输出函数但是他们只会执行一次之后尽管我们切换页面到 ArticleDetail 中再切回去也不会再触发生命周期函数。 为了弥补无法使用之前生命函数的问题Vue提供了 activated 和 deactivated 两个函数
如图当我们第一次加载页面时就会有 created mounted activated 三个函数被触发 当我们切换到 ArticleDetail 时就会触发deactivated函数 总结
keep-alive是什么 vue 的内置组件包裹动态组件时可以缓存keep-alive的优点 组件切换过程中 把切换出去的组件保留在内存中提升性能keep-alive的三个属性了解 1-include组件名数组只有匹配的组件会被缓存 2-exclude 组件名数组任何匹配的组件都不会被缓存 3-max最多可以缓存多少组件实例keep-alive的使用会触发两个生命周期函数了解 activated 当组件被激活使用的时候触发 → 进入页面触发 deactivated 当组件不被使用的时候触发 → 离开页面触发 面经总结 vue-router 的高级用法(参考21版Vue)
路由重定向
路由重定向指的是用户在访问地址 A 的时候强制用户跳转到地址 C 从而展示特定的组件页面。通过路由规则的 redirect 属性指定一个新的路由地址可以很方便地设置路由的重定向
const router createRouter({// 3.1 通过 history 属性指定路由的工作模式history: createWebHashHistory(),// 3.2 通过 routes 数组指定路由规则routes: [// path 是 hash 地址 component 是要展示的组件{ path: /, redirect: /home },{ path: /home, component: MyHome },{ path: /movie, component: MyMovie },{ path: /about, component: MyAbout },]
})路由高亮
可以通过如下的两种方式将激活的路由链接进行高亮显示
① 使用默认的高亮 class 类 ② 自定义路由高亮的 class 类
2.1 默认的高亮 class 类
被激活的路由链接默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器为激活的路由链接设置高亮的样式
/* 在 index.css 全局样式表中重新 router-link-active 的样式 */
.router-link-active {background-color: red;color: white;font-weight: bold;
}效果 2.2 自定义路由高亮的 class 类
在创建路由的实例对象时开发者可以基于 linkActiveClass 属性自定义路由链接被激活时所应用的类名
// 3. 创建路由实例对象
const router createRouter({// 3.1 通过 history 属性指定路由的工作模式history: createWebHashHistory(),// 指定被激活的路由链接会应用 router-active 这个类名// 默认的 router-link-active 类名会被覆盖掉linkActiveClass: router-active,// 3.2 通过 routes 数组指定路由规则routes: [// 其中path 表示需要被重定向的“原地址”redirect表示将要被重定向到的“新地址”{ path: /, redirect: /movie },// path 是 hash 地址 component 是要展示的组件{ path: /home, component: MyHome },{ path: /movie, component: MyMovie },{ path: /about, component: MyAbout },]
})嵌套路由
通过路由实现组件的嵌套展示叫做嵌套路由。 ① 声明子路由链接和子路由占位符
② 在父路由规则中通过 children 属性嵌套声明子路由规则
3.1 声明子路由链接和子路由占位符
在 About.vue 组件中声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下
templatedivh1MyApp/h1!-- 在关于页面中声明两个子路由链接 --router-link to/about/tab1Tab1/router-linknbsp;router-link to/about/tab2Tab2/router-linknbsp;router-link to/about/tab3Tab3/router-linkhr /!-- 在关于页面中声明 tab1 和 tab2 的路由占位符 --router-view/router-view/div
/template3.2 通过 children 属性声明子路由规则
在 router.js 路由模块中导入需要的组件并使用 children 属性声明子路由规则。示例代码如下
import Tab1 from ./tabs/MyTab1.vue
import Tab2 from ./tabs/MyTab2.vue// 创建路由对象
const router createRouter({// 指定路由的工作模式history: createWebHashHistory(),// 自定义路由高亮的 class 类linkActiveClass: active-router,// 声明路由的匹配规则routes: [{ path: /, redirect: /home},{ path: /home, component: Home },{ path: /movie, component: Movie },{ path: /about, component: About, children: [// 通过 children 属性嵌套子级路由规则{ path: tab1, component: Tab1 }, // 访问 /about/tab1 时 展示 Tab1 组件{ path: tab2, component: Tab2 }, // 访问 /about/tab2 时展示 Tab2 组件] },]
})注意子路由规则的 path 不要以 / 开头
3.3 子路由重定向
当我们点击‘关于’时可以直接显示出Tab1中的内容 routes: [// 其中path 表示需要被重定向的“原地址”redirect表示将要被重定向到的“新地址”{ path: /, redirect: /movie },// path 是 hash 地址 component 是要展示的组件{ path: /home, component: MyHome },{ path: /movie, component: MyMovie },{ path: /about, component: MyAbout , redirect: /about/tab1,children: [{ path: tab1, component: Tab1 },{ path: tab2, component: Tab2 },]},
]动态路由匹配
思考有如下 3 个路由链接
router-link to/movie/1电影1/router-linknbsp;
router-link to/movie/2电影2/router-linknbsp;
router-link to/movie/3电影3/router-linknbsp;定义如下 3 个路由规则是否可行???
{ path: /movie/1, component: Movie }
{ path: /movie/2, component: Movie }
{ path: /movie/3, component: Movie }缺点路由规则的复用性差。
4.1 动态路由的概念
动态路由指的是把 Hash 地址中可变的部分定义为参数项从而提高路由规则的复用性。在 vue-router 中使用英文的冒号:来定义路由的参数项。
示例代码如下
// 路由中的动态参数以进行声明冒号后面的是动态参数的名称
{ path: /movie/:id, component: Movie },// 将以下3个路由规划合并成了一个提高了路由规划的复用性
{ path: /movie/1, component: Movie }
{ path: /movie/2, component: Movie }
{ path: /movie/3, component: Movie }4.2 $route.params 参数对象
通过动态路由匹配的方式渲染出来的组件中可以使用 $route.params 对象访问到动态匹配的参数值。
template!-- $route.params 是路由的“参数对象” --h3MyMoive --- {{ $route.params.id }}/h3
/templatescript
export default {name: MyMovie
}
/script4.3 使用 props 接收路由参数 为了简化路由参数的获取形式vue-router 允许在路由规则中开启 props 传参。示例代码如下
// 在定义路由规则时声明 props: true 选项// 即可在 Movie 组件中以 props 的形式接收到路由规则匹配到的参数项
{ path: /movie/:id, component: MyMovie , props: true},template!-- 3.直接使用 props 中接收路由参数 --h3MyMoive --- {{ id }}/h3
/templatescript
export default {name: MyMovie,props: [id] // 2. 使用 props 接收路由规则中匹配到的参数项
}
/script编程式导航
通过调用 API 实现导航的方式叫做编程式导航。与之对应的通过点击链接实现导航的方式叫做声明式导航。例如
普通网页中点击链接、vue 项目中点击 都属于声明式导航
普通网页中调用 location.href 跳转到新页面的方式属于编程式导航
5.1 vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API其中最常用的两个 API 分别是
① this.$router.push(‘hash 地址’)
跳转到指定 Hash 地址从而展示对应的组件
② this.$router.go(数值 n)
实现导航历史的前进、后退
**5.2 r o u t e r . p u s h ∗ ∗ 调用 t h i s . router.push** 调用 this. router.push∗∗调用this.router.push() 方法可以跳转到指定的 hash 地址从而展示对应的组件页面。示例代码如下
templateh3MyHome/h3button clickgoToMovie(3)导航到Movie页面/button
/templatescript
export default {name: MyHome,methods: {goToMovie(id) {this.$router.push(/movie/ id)// this.$router.push(/movie/${id})}}
}
/script5.2 $router.go
调用 this.$router.go() 方法可以在浏览历史中进行前进和后退。示例代码如下
template!-- 3.直接使用 props 中接收路由参数 --h3MyMoive --- {{ id }}/h3button clickgoBack()回上一个/button
/templatescript
export default {name: MyMovie ,props: [id] ,// 2. 使用 props 接收路由规则中匹配到的参数项methods: {goBack() {this.$router.go(-1)}}
}
/script效果 总结
使用对应的API来实现导航跳转就叫做编程式导航。 命名路由
通过 name 属性为路由规则定义名称的方式叫做命名路由。示例代码如下
{ // 使用 name 属性为当前的路由规则定义一个“名称”name: mov, path: /movie/:id, component: MyMovie ,props: true,
},注意命名路由的 name 值不能重复必须保证唯一性
6.1 使用命名路由实现声明式导航
为 标签动态绑定 to 属性的值并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下
templateh3MyHome/h3router-link :to{ name: mov , params: {id: 3}}go to Movie/router-link
/templatescript
export default {name: MyHome
}
/script6.2 使用命名路由实现编程式导航
调用 push 函数期间指定一个配置对象name 是要跳转到的路由规则、params 是携带的路由参数 templatedivh3MyHome/h3router-link :to{ name: mov , params: {id: 3}}go to Movie/router-linkbutton clickgoToMovie(1) go to movie /button/div
/templatescript
export default {name: MyHome,methods: {goToMovie(id) {this.$router.push({name: mov,params: {id: id,}})}}
}
/script总结
如果在实际项目中哈希地址比较长的话建议采用name来进行命名跳转 导航守卫
导航守卫可以控制路由的访问权限。示意图如下 7.1 如何声明全局导航守卫
全局导航守卫会拦截每个路由规则从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫
// 创建路由实例对象
const router createRouter({ ... })// 声明全局的导航守卫// 调用路由实例对象的 beforeEach 函数声明 全局前置守卫// fn 必须是一个函数每次拦截到路由的请求都会调用 fn 进行处理// 因此 fn 叫做 “守卫方法”
router.beforeEach(fn)也可以是箭头函数
router.beforeEach(() {console.log(ok);
})7.2 守卫方法的 3 个形参
全局导航守卫的守卫方法中接收 3 个形参格式为
// 创建路由实例对象
const router createRouter({ ... })// 全局前置守卫
router.beforeEach((to, from, next) {// to 目标路由对象// from 当前导航正要离开的路由对象// next 是一个函数表示放行
})注意 ① 在守卫方法中如果不声明 next 形参则默认允许用户访问每一个路由 ② 在守卫方法中如果声明了 next 形参则必须调用 next() 函数否则不允许用户访问任何一个路由
7.3 next 函数的 3 种调用方式
参考示意图分析 next 函数的 3 种调用方式最终导致的结果 直接放行next()
案例
router.beforeEach((to, from, next) {if(to.path /main) {// 证明用户要访问后台 主页next()} else {// 访问的不是后台主页next()}
})强制其停留在当前页面next(false)
router.beforeEach((to, from, next) {if(to.path /main) {// 证明用户要访问后台 主页next(false)} else {// 访问的不是后台主页next()}
})强制其跳转到登录页面next(‘/login’) router.beforeEach((to, from, next) {if(to.path /main) {// 证明用户要访问后台 主页next(/login)} else {// 访问的不是后台主页next()}
})7.4 结合 token 控制后台主页的访问权限
目的通过token来控制后台主页的访问权限
我们先通过localStorage来获取token值再判断目的地址是否为main以及token值是否存在
如果用户的token值存在且目的地址为main则让用户通过否则让用户进入登陆页面。
这里我通过在Application中设置假token来进入网站 router.beforeEach((to, from, next) {const tokenStr localStorage.getItem(token) // 1. 获取 tokenif(to.path /main !token) { // 2. 想要访问“后台主页”且token值不存在// next(false) // 3.1 不允许跳转next(/login) // 3.2 强制跳转到登陆页面} else {next() // 3.3 直接放行允许访问“后台主页”}
})理解从localstorage值获取token值并且根据访问路径以及token值是否存在来进行下面的逻辑处理 VueCli 自定义创建项目
创建步骤 1.安装脚手架 (已安装)
npm i vue/cli -g2.创建项目
vue create hm-exp-mobile选项
Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features 选自定义手动选择功能 选择vue的版本 3.x2.x是否使用history模式 选择css预处理 选择eslint的风格 eslint 代码规范的检验工具检验代码是否符合规范比如const age 18; 报错多加了分号后面有工具一保存全部格式化成最规范的样子 选择校验的时机 直接回车 选择配置文件的生成方式 直接回车 是否保存预设下次直接使用 不保存输入 N 等待安装项目初始化完成 启动项目
npm run serveESlint代码规范及手动修复
代码规范一套写代码的约定规则。
例如赋值符号的左右是否需要空格一句结束是否是要加;… 没有规矩不成方圆 ESLint:是一个代码检查工具用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时我们使用的是 JavaScript Standard Style 代码风格的规则。
1.JavaScript Standard Style 规范说明
建议把https://standardjs.com/rules-zhcn.html 看一遍然后在写的时候, 遇到错误就查询解决。
下面是这份规则中的一小部分
字符串使用单引号 – 需要转义的地方除外无分号 – 这没什么不好。不骗你关键字后加空格 if (condition) { ... }函数名后加空格 function name (arg) { ... }坚持使用全等 摒弃 一但在需要检查 null || undefined 时可以使用 obj null…
2.代码规范错误
如果你的代码不符合standard的要求eslint会跳出来刀子嘴豆腐心地提示你。
下面我们在main.js中随意做一些改动添加一些空行空格。
import Vue from vue
import App from ./App.vueimport ./styles/index.less
import router from ./router
Vue.config.productionTip falsenew Vue ( {render: h h(App),router
}).$mount(#app)按下保存代码之后
你将会看在控制台中输出如下错误 eslint 是来帮助你的。心态要好有错就改。 3.手动修正
根据错误提示来一项一项手动修正。
如果你不认识命令行中的语法报错是什么意思你可以根据错误代码func-call-spacing, space-in-parens,…去 ESLint 规则列表中查找其具体含义。
打开 ESLint 规则表使用页面搜索Ctrl F这个代码查找对该规则的一个释义。 通过eslint插件来实现自动修正 eslint会自动高亮错误显示 通过配置eslint会自动帮助我们修复错误 如何安装 如何配置
// 当保存的时候eslint自动帮我们修复错误
editor.codeActionsOnSave: {source.fixAll: true
},
// 保存代码不自动格式化
editor.formatOnSave: false注意eslint的配置文件必须在根目录下这个插件才能才能生效。打开项目必须以根目录打开一次打开一个项目
注意使用了eslint校验之后把vscode带的那些格式化工具全禁用了 Beatify
settings.json 参考
{window.zoomLevel: 2,workbench.iconTheme: vscode-icons,editor.tabSize: 2,emmet.triggerExpansionOnTab: true,// 当保存的时候eslint自动帮我们修复错误editor.codeActionsOnSave: {source.fixAll: true},// 保存代码不自动格式化editor.formatOnSave: false
}
