zencart网站管理 1.5,新产品推广方案策划,微信 html5 网站,汕头做网站多少钱目录
一、声明式导航-导航链接
1.需求
2.解决方案
3.通过router-link自带的两个样式进行高亮
二、声明式导航的两个类名
1.router-link-active
2.router-link-exact-active
三、声明式导航-自定义类名#xff08;了解#xff09;
1.问题
2.解决方案
3.代码演示
四…目录
一、声明式导航-导航链接
1.需求
2.解决方案
3.通过router-link自带的两个样式进行高亮
二、声明式导航的两个类名
1.router-link-active
2.router-link-exact-active
三、声明式导航-自定义类名了解
1.问题
2.解决方案
3.代码演示
四、声明式导航-查询参数传参
1.目标
2.跳转传参
3.查询参数传参
4.代码演示
五、声明式导航-动态路由传参
1.动态路由传参方式
2.查询参数传参 VS 动态路由传参
3.总结
七、Vue路由-重定向
1.问题
2.解决方案
3.语法
4.代码演示
八、Vue路由-404
1.作用
2.位置
3.语法
4.代码示例
九、Vue路由的模式设置
1.问题
2.语法
十、编程式导航-两种路由跳转方式
1.问题
2.方案
3.语法
4.通过path路由路径的方式跳转
5.代码演示 path跳转方式
6.name给路由规则命名后跳转
十一、编程式导航-path路由路径跳转时传参
1.问题
2.两种传参方式
3.传参
4.path路由路径跳转时传参查询参数传参
5.path路径跳转传参动态路由传参
十二、编程式导航-name命名路由跳转时传参
1.name 命名路由跳转传参 (query传参)
2.name 命名路由跳转传参 (动态路由传参)
3.总结 一、声明式导航跳转-导航链接
1.需求
实现导航高亮效果 2.解决方案
vue-router中提供了一个全局组件 router-link 来取代a标签 能跳转使用 to 属性指定跳转路径(必须) 。本质还是 a 标签 to 无需 # 能高亮默认会提供用于高亮的类名可以直接使用这两个类名设置高亮样式
语法 router-link topath的值发现音乐/router-link 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
3.通过router-link自带的两个样式进行高亮
使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active此时可以编写css给任意一个class属性添加高亮样式即可实现功能
二、声明式导航跳转的两个类名
当使用router-link/router-link代替a标签时会自动给当前导航加上两个类名 1.router-link-active
模糊匹配用的多
to/my 可以匹配 /my /my/a /my/b 等等路径
只要是以/my开头的路径 都可以和 to/my匹配到就会加上router-link-active这个类名
2.router-link-exact-active
精确匹配
to/my 仅可以匹配 /my
三、声明式导航跳转-自定义类名了解
1.问题
router-link的两个高亮类名 太长了我们希望能定制怎么办 2.解决方案
我们可以在创建路由对象时额外配置两个属性即可。 linkActiveClass和linkExactActiveClass
const router new VueRouter({routes: [...],linkActiveClass: 类名1,linkExactActiveClass: 类名2
}) 3.代码演示
// 创建了一个路由对象
const router new VueRouter({routes: [...], linkActiveClass: active, // 配置模糊匹配的类名linkExactActiveClass: exact-active // 配置精确匹配的类名
})
四、声明式导航跳转-查询参数传参
1.目标
在跳转路由时将需要的参数传到其他组件中
比如现在我们在搜索页点击了热门搜索链接跳转到详情页需要把点击的内容带到详情页 2.跳转传参
我们可以通过两种方式在跳转的时候把所需要的参数传到其他页面中 查询参数传参 动态路由传参
3.查询参数传参 传参语法和地址栏传参的格式一样 router-link to/path?参数名参数值.../router-link 如何接受参数 固定用法在路由跳转的组件中使用 $router.query.参数名 接收参数值
4.代码演示
App.vue
templatediv idappdiv classlinkrouter-link to/home首页/router-linkrouter-link to/search搜索页/router-link/divrouter-view/router-view/div
/templatescript
export default {};
/scriptstyle scoped
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
/style
Home.vue
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton搜索一下/button/divdiv classhot-link热门搜索router-link to/search?key黑马程序员黑马程序员/router-linkrouter-link to/search?key前端培训前端培训/router-linkrouter-link to/search?key如何成为前端大牛如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic
}
/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;
}
/style
Search.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
router/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 },{ path: /search, component: Search }]
})export default router
main.js
import Vue from vue
import App from ./App.vue
import router from ./router/indexVue.config.productionTip falsenew Vue({render: h h(App),router
}).$mount(#app)五、声明式导航跳转-动态路由传参
1.动态路由传参方式 在路由规则中配置动态路由 动态路由后面的参数可以随便起名但要有语义:参数名
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 },{ path: /search/:words, component: Search }]
})export default router 配置导航链接 to/path/参数值 在对应的页面组件中接受参数 $route.params.参数名 params后面的参数名要和动态路由配置的参数保持一致
实例
App.vue
templatediv idappdiv classlinkrouter-link to/home首页/router-linkrouter-link to/search搜索页/router-link/divrouter-view/router-view/div
/templatescript
export default {};
/scriptstyle scoped
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
/style router/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 },{ path: /search/:words, component: Search }]
})export default router
Home.vue
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton搜索一下/button/divdiv classhot-link热门搜索router-link to/search/黑马程序员黑马程序员/router-linkrouter-link to/search/前端培训前端培训/router-linkrouter-link to/search/如何成为前端大牛如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic
}
/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;
}
/style
Search.vue
templatediv classsearchp搜索关键字: {{ $route.params.words }} /pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数// this.$route.query.参数名 获取查询参数// this.$route.params.参数名 获取动态路由参数console.log(this.$route.params.words);}
}
/scriptstyle
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
/style 2.查询参数传参 VS 动态路由传参 查询参数传参 (比较适合传多个参数) 跳转to/path?参数名值参数名2值 获取$route.query.参数名 动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: /path/:参数名 跳转to/path/参数值 获取$route.params.参数名 注意动态路由也可以传多个参数但一般只传一个
3.总结
声明式导航跳转时, 有几种方式传值给路由页面 查询参数传参多个参数 动态路由传参一个参数优雅简洁
七、Vue路由-重定向
1.问题
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白
2.解决方案
重定向 → 匹配某个路径path后, 强制跳转到 路由中的某个path路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 }比如
{ path:/ ,redirect:/home }
4.代码演示
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: /, redirect: /home },{ path: /home, component: Home },{ path: /search/:words?, component: Search }]
})export default router
八、Vue路由-404
1.作用
当路径找不到匹配的组件时给个提示页面
2.位置
404的路由一般都配置在其他路由规则的最后面
3.语法
path: * (任意路径) – 当前面的路由规则都不匹配就会命中最后这个
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})
4.代码示例
NotFound.vue
templatedivh1404 Not Found/h1/div
/templatescript
export default {}
/scriptstyle/style
router/index.js
import Home from /views/Home
import Search from /views/Search
import NotFound from /views/NotFound
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({routes: [{ path: /, redirect: /home },{ path: /home, component: Home },{ path: /search/:words?, component: Search },{ path: *, component: NotFound }]
})export default router
九、Vue路由的模式设置
1.问题
路由的路径看起来不自然, 有#能否切成真正路径形式? hash路由(默认) 例如: http://localhost:8080/#/home history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
2.语法
创建VueRouter对象的时候多传一个mode属性进去即可去掉“#”号。
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
}) 代码
import Home from /views/Home
import Search from /views/Search
import NotFound from /views/NotFound
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({// 注意一旦采用了 history 模式地址栏就没有 #需要后台配置访问规则mode: history,routes: [{ path: /, redirect: /home },{ path: /home, component: Home },{ name: search, path: /search/:words?, component: Search },{ path: *, component: NotFound }]
})export default router
十、编程式导航跳转-两种路由跳转方式
1.问题
点击按钮进行跳转如何实现点击按钮的跳转一般不会使用声明式导航跳转 2.方案
编程式导航用JS代码来进行跳转
3.语法
两种语法 通过path路由路径的方式跳转简易方便 name 命名路由跳转 (适合 path 路径长的场景)
4.通过path路由路径的方式跳转
特点简易方便
要跳转访问哪个组件就写那个组件的路由路径
//简单写法
this.$router.push(路由路径)//完整写法
this.$router.push({path: 路由路径
})
5.代码演示 path跳转方式
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton clickgoSearch搜索一下/button/divdiv classhot-link热门搜索router-link to/search/黑马程序员黑马程序员/router-linkrouter-link to/search/前端培训前端培训/router-linkrouter-link to/search/如何成为前端大牛如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic,methods: {goSearch () {// 1. 通过路径的方式跳转// (1) this.$router.push(路由路径) [简写]this.$router.push(/search)// (2) this.$router.push({ [完整写法]// path: 路由路径 // })this.$router.push({path: /search})}}
}
/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;
}
/style
6.name给路由规则命名后跳转
特点适合 path 路径长的场景
语法 路由规则先使用name属性命名路由
{ name: 路由名, path: /path/xxx, component: XXX },
然后通过name来进行跳转
this.$router.push({name: 路由名
})
代码
import Home from /views/Home
import Search from /views/Search
import NotFound from /views/NotFound
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({// 注意一旦采用了 history 模式地址栏就没有 #需要后台配置访问规则mode: history,routes: [{ path: /, redirect: /home },{ path: /home, component: Home },{ name: search, path: /search/:words?, component: Search },{ path: *, component: NotFound }]
})export default router
Home.vue
templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton clickgoSearch搜索一下/button/divdiv classhot-link热门搜索router-link to/search/黑马程序员黑马程序员/router-linkrouter-link to/search/前端培训前端培训/router-linkrouter-link to/search/如何成为前端大牛如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic,methods: {goSearch () {// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径// this.$router.push({// name: 路由名// })this.$router.push({name: search})}}
}
/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;
}
/style 十一、编程式导航跳转-path路由路径跳转时传参
1.问题
点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现 2.两种传参方式
1.查询参数传参
2.动态路由传参
3.传参
两种跳转方式对于两种传参方式都支持
① path 路径跳转时传参
② name 命名路由跳转时传参
4.path路由路径跳转时传参查询参数传参
//简单写法在路径后面使用地址栏传参的格式传参
this.$router.push(/路径?参数名1参数值1参数2参数值2)//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})
接受参数的方式依然是在目标组件中使用 $route.query.参数名 接收
5.path路径跳转传参动态路由传参
//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})
接受参数的方式依然是在目标组件中使用 $route.params.参数值 接收
注意path不能配合params使用
十二、编程式导航跳转-name命名路由跳转时传参
1.name 命名路由跳转传参 (query传参)
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})
2.name 命名路由跳转传参 (动态路由传参)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
3.总结
编程式导航如何跳转传参
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: /路径/参数值
})
2.name命名路由跳转 query传参
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})
动态路由传参 (需要配动态路由)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
十三、面经基础版-案例效果分析
1.面经效果演示
2.功能分析 通过演示效果发现主要的功能页面有两个一个是列表页一个是详情页并且在列表页点击时可以跳转到详情页 底部导航可以来回切换并且切换时只有上面的主题内容在动态渲染 3.实现思路分析配置路由功能实现
1.配置路由 首页和面经详情页两个一级路由 首页内嵌套了4个可切换的页面需要嵌套二级路由
2.实现功能 首页请求渲染 跳转传参 到 详情页详情页动态渲染 组件缓存性能优化 十四、面经基础版-一级路由配置
1.把文档中准备的素材拷贝到项目中
2.针对router/index.js文件 进行一级路由配置
import Vue from vue
import VueRouter from vue-router;
Vue.use(VueRouter)import Layout from /views/Layout;
import ArticleDetail from /views/ArticleDetail;const router new VueRouter({routes: [{ path: /,component: Layout},{path: /detail,component: ArticleDetail}]
})export default router
十五、面经基础版-二级路由配置
二级路由也叫嵌套路由当然也可以嵌套三级、四级...
1.使用场景
当在页面中点击链接跳转只是部分内容切换时我们可以使用嵌套路由
2.语法 在一级路由下配置children属性即可 配置二级路由的出口
1.在一级路由下配置children属性
注意:一级的路由path 需要加 / 二级路由的path不需要加 /
import Vue from vue
import VueRouter from vue-router;
Vue.use(VueRouter)import Layout from /views/Layout;
import ArticleDetail from /views/ArticleDetail;
import Article from /views/Article;
import Collect from /views/Collect;
import Like from /views/Like;
import User from /views/User;const router new VueRouter({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 router
技巧二级路由应该配置到哪个一级路由下呢
这些二级路由对应的组件渲染到哪个一级路由的组件下children就配置到哪个路由下边
2.配置二级路由的出口 router-view/router-view
注意 配置了嵌套路由要配置对应的路由出口否则不会渲染出对应的组件
Layout.vue
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
// import router from 02-路由模块拆分/router;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
十六、面经基础版-二级导航高亮
1.实现思路 将a标签替换成 router-link/router-link组件配置to属性不用加 # 结合高亮类名实现高亮效果 (推荐模糊匹配router-link-active)
2.代码实现
Layout.vue
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
// import router from 02-路由模块拆分/router;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 axios
2.接口文档
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get
3.created中发送请求获取数据存储到data中
article.vue
templatediv classarticle-pagedivv-foritem in articles:keyitem.idclassarticle-itemdiv 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
/templatescript
import axios from axios;// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
export default {name: ArticlePage,async created(){const res await axios.get(https://mock.boxuegu.com/mock/3083/articles)this.articles res.data.result.rows; // 获取文章列表并绑定到 data 项中},data () {return {articles: []}}
}
/scriptstyle langless scoped
.article-page {background: #f5f5f5;
}
.article-item {margin-bottom: 10px;background: #fff;padding: 10px 15px;.head {display: flex;img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}.con {flex: 1;overflow: hidden;padding-left: 15px;p {margin: 0;line-height: 1.5;.title {text-overflow: ellipsis;overflow: hidden;width: 100%;white-space: nowrap;}.other {font-size: 10px;color: #999;}}}}.body {font-size: 14px;color: #666;line-height: 1.6;margin-top: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.foot {font-size: 12px;color: #999;margin-top: 10px;}
}
/style
十八、面经基础版-查询参数传参
1.说明
跳转到详情页时需要把当前点击文章的id传给文章详情页获取数据 查询参数传参 this.$router.push(/detail?参数1参数值参数2参数值) 动态路由传参 先改造路由 在传参 this.$router.push(/detail/参数值)
Article.vue div classarticle-pagedivv-foritem in articles:keyitem.idclassarticle-itemclick$router.push(/detail?id${item.id})div 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
ArticleDetail.vue created(){console.log(this.$route.query.id)}
十九、面经基础版-动态路由传参
1.实现步骤 改造路由 动态传参 在详情页获取参数
2.代码实现
改造路由
router/index.js
import Vue from vue
import VueRouter from vue-router;
Vue.use(VueRouter)import Layout from /views/Layout;
import ArticleDetail from /views/ArticleDetail;
import Article from /views/Article;
import Collect from /views/Collect;
import Like from /views/Like;
import User from /views/User;const router new VueRouter({routes: [{ path: /,component: Layout,children: [{ path: /article, component: Article },{path: /collect, component: Collect},{ path: /like, component: Like},{ path: /user, component: User}]},{path: /detail/:id,component: ArticleDetail}]
})export default router
Article.vue
div classarticle-pagedivv-foritem in articles:keyitem.idclassarticle-itemclick$router.push(/detail/${item.id})div 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
ArticleDetail.vue created(){console.log(this.$route.params.id)}
3.额外优化功能点-点击回退跳转到上一页
ArticleDetail.vue
templatediv classarticle-detail-pagenav classnavspan classback click$router.back()lt;/span 面经详情/nav..../div
/template
二十、面经基础版-实现详情页的渲染
1.实现步骤分析 导入axios 查看接口文档 在created中发送请求 页面动态渲染 2.代码实现
接口文档 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id 请求方式: get
articleDetail.vue
templatediv classarticle-detail-page v-ifarticle.idnav classnavspan classback click$router.back()lt;/span 面经详情/navheader classheaderh1{{ article.stem }}/h1p{{ article.createdAt }} | {{ article.views }} | {{ article.likeCount }}/ppimg:srcarticle.creatorAvataralt/span{{ article.creatorName }}/span/p/headermain classbody{{ article.content }}/main/div
/templatescript
import axios from axios;// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
export default {name: ArticleDetailPage,async created(){const id this.$route.params.idconst {data} await axios.get(https://mock.boxuegu.com/mock/3083/articles/${id})this.article data.result;console.log(this.article);},data() {return {article: {}}}
}
/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
二十一、面经基础版-缓存组件
1.问题
从面经列表 点到 详情页又点返回数据重新加载了 → 希望回到原来的位置 2.原因
当路由被跳转后原来所看到的组件就被销毁了会执行组件内的beforeDestroy和destroyed生命周期钩子重新返回后组件又被重新创建会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子所以数据被重新加载了
3.解决方案
利用keep-alive把原来的组件给缓存下来 4.什么是keep-alive
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
优点
在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM
减少加载时间及性能消耗提高用户体验性。
App.vue
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/template
问题
缓存了所有被切换的组件文章详情页不用被缓存
5.keep-alive的三个属性
① include 组件名数组只有匹配的组件会被缓存
② exclude 组件名数组任何匹配的组件都不会被缓存
③ max 最多可以缓存多少组件实例
App.vue
templatediv classh5-wrapperkeep-view :includes[LayoutPage]router-view/router-view/keep-view/div
/template
6.额外的两个生命周期钩子
keep-alive的使用会触发两个生命周期函数
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子帮我们实现业务需求。 7.总结
1.keep-alive是什么
2.keep-alive的优点
3.keep-alive的三个属性 (了解)
4.keep-alive的使用会触发两个生命周期函数(了解)
二十二、VueCli 自定义创建项目
基于VueCli自定义项目架子
1.安装脚手架 (已安装)
npm i vue/cli -g
2.创建项目
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 serve
二十三、ESlint代码规范及手动修复
代码规范一套写代码的约定规则。例如赋值符号的左右是否需要空格语句结束是否是要加;... 没有规矩不成方圆 ESLint:是一个代码检查工具用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时我们使用的是 JavaScript Standard Style 代码风格的规则。
1.JavaScript Standard Style 规范说明
建议把JavaScript Standard Style 看一遍然后在写的时候, 遇到错误就查询解决。
下面是这份规则中的一小部分 字符串使用单引号 – 需要转义的地方除外 无分号 – 这没什么不好。不骗你 关键字后加空格 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
}
