深圳网站优化怎么做,门户网站如何建设,和佳网站建设,中天银都建设集团网站一、声明式导航-导航链接
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 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
语法 发现音乐 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属性添加高亮样式即可实现功能
二、声明式导航-两个类名
当我们使用跳转时自动给当前导航加了两个类名 1.router-link-active
模糊匹配用的多
to“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to/my匹配到
2.router-link-exact-active
精确匹配
to“/my” 仅可以匹配 /my
3.在地址栏中输入二级路由查看类名的添加
三、声明式导航-自定义类名了解
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.查询参数传参 如何传参 如何接受参数 固定用法$route.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/templatescriptexport default {}/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/templatescriptexport default {name: MyFriend,created () {// 在created中获取路由参数console.log(this.$route.query);}}/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 }]
})// /search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符
const router new VueRouter({routes: [...{ path: /search/:words?, component: Search }]
})配置导航链接 to“/path/参数值” 对应页面组件接受参数 $route.params.参数名 params后面的参数名要和动态路由配置的参数保持一致
2.查询参数传参 VS 动态路由传参 查询参数传参 (比较适合传多个参数) 跳转to“/path?参数名值参数名2值”获取$route.query.参数名 动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: “/path/:参数名”跳转to“/path/参数值”获取$route.params.参数名 注意动态路由也可以传多个参数但一般只传一个
3.总结
声明式导航跳转时, 有几种方式传值给路由页面
查询参数传参多个参数动态路由传参一个参数优雅简洁
