锦州网站制作,小型办公室网络组建,wordpress更改php版本,wordpress+代码行号一、声明式导航-导航链接
1.需求
实现导航高亮效果 如果使用a标签进行跳转的话#xff0c;需要给当前跳转的导航加样式#xff0c;同时要移除上一个a标签的样式#xff0c;太麻烦#xff01;#xff01;#xff01;
2.解决方案
vue-router 提供了一个全局组件 router…一、声明式导航-导航链接
1.需求
实现导航高亮效果 如果使用a标签进行跳转的话需要给当前跳转的导航加样式同时要移除上一个a标签的样式太麻烦
2.解决方案
vue-router 提供了一个全局组件 router-link (取代 a 标签)
能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
语法 router-link to“path的值”发现音乐/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/div3.通过router-link自带的两个样式进行高亮
使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
templatedivdiv 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
/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;
}
/style4.总结
router-link是什么router-link怎么用router-link的好处是什么
二、声明式导航-两个类名
当我们使用router-link/router-link跳转时自动给当前导航加了两个类名 1.router-link-active
模糊匹配用的多
to“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to/my匹配到
2.router-link-exact-active
精确匹配
to“/my” 仅可以匹配 /my
3.在地址栏中输入二级路由查看类名的添加
4.总结
router-link 会自动给当前导航添加两个类名有什么区别呢
三、声明式导航-自定义类名了解
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 // 配置精确匹配的类名
})4.总结
如何自定义router-link的两个高亮类名
四、声明式导航-查询参数传参
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;
}
/styleHome.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;
}
/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;
}
/stylerouter/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 routermain.js
...
import router from ./router/index
...
new Vue({render: h h(App),router
}).$mount(#app)五、声明式导航-动态路由传参
1.动态路由传参方式 配置动态路由 动态路由后面的参数可以随便起名但要有语义 const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
})配置导航链接 to“/path/参数值” 对应页面组件接受参数 $route.params.参数名 params后面的参数名要和动态路由配置的参数保持一致
2.代码演示
router/index.js
import Home from /views/Home
import Search from /views/Searchimport VueRouter from vue-router
import Vue from vue
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter({// routes 路由规则们// route 一条路由规则 { path: 路径, component: 组件 }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;
}
/styleSearch.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;
}
/style3.查询参数传参 VS 动态路由传参 查询参数传参 (比较适合传多个参数) 跳转to“/path?参数名值参数名2值” 获取$route.query.参数名 动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: “/path/:参数名”跳转to“/path/参数值”获取$route.params.参数名 注意动态路由也可以传多个参数但一般只传一个
4.总结
声明式导航跳转时, 有几种方式传值给路由页面
查询参数传参多个参数动态路由传参一个参数优雅简洁
六、动态路由参数的可选符(了解)
1.问题
配了路由 path:“/search/:words” 为什么按下面步骤操作会未匹配到组件显示空白 2.原因
/search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符
const router new VueRouter({routes: [...{ path: /search/:words?, component: Search }]
})七、Vue路由-重定向
1.问题
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白 2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如
{ path:/ ,redirect:/home }4.代码演示
const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})八、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/stylerouter/index.js
...
import NotFound from /views/NotFound
...// 创建了一个路由对象
const router new VueRouter({routes: [...{ path: *, component: NotFound }]
})export default router九、Vue路由-模式设置
1.问题
路由的路径看起来不自然, 有#能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
2.语法
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})十、编程式导航-两种路由跳转方式
1.问题
点击按钮跳转如何实现 2.方案
编程式导航用JS代码来进行跳转
3.语法
两种语法
path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景)
4.path路径跳转语法
特点简易方便
//简单写法
this.$router.push(路由路径)//完整写法
this.$router.push({path: 路由路径
})5.代码演示 path跳转方式 // 1. 通过路径的方式跳转// (1) this.$router.push(路由路径) [简写]this.$router.push(/search)// (2) this.$router.push({ [完整写法]// path: 路由路径 // })this.$router.push({path: /search})6.name命名路由跳转
特点适合 path 路径长的场景
语法 路由规则必须配置name配置项 { name: 路由名, path: /path/xxx, component: XXX },通过name来进行跳转 this.$router.push({name: 路由名
})7.代码演示通过name命名路由跳转
//路由规则中配置name
{ name: search, path: /search/:words?, component: Search },// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径// this.$router.push({// name: 路由名// })this.$router.push({name: search})8.总结
编程式导航有几种跳转方式
十一、编程式导航-path路径跳转传参
1.问题
点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现 2.两种传参方式
1.查询参数
2.动态路由传参
3.传参
两种跳转方式对于两种传参方式都支持
① path 路径跳转传参
② name 命名路由跳转传参
4.path路径跳转传参query传参
//简单写法
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.什么是keep-alive
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
优点
在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM
减少加载时间及性能消耗提高用户体验性。
App.vue
templatedivkeep-aliverouter-view/router-view/keep-alive/div
/template问题
缓存了所有被切换的组件
2.keep-alive的三个属性
① include 组件名数组只有匹配的组件会被缓存
② exclude 组件名数组任何匹配的组件都不会被缓存
③ max 最多可以缓存多少组件实例
App.vue
templatediv classh5-wrapperkeep-alive :include[LayoutPage]router-view/router-view/keep-alive/div
/template3.额外的两个生命周期钩子
keep-alive的使用会触发两个生命周期函数
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子帮我们实现业务需求。
