前端Vue入门-day06-路由进阶
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
目录
路由的封装抽离
问题:所有的路由配置都堆在main.js中合适么?目标:将路由模块抽离出来。 好处: 拆分模块,利于维护绝对路径:@指代src目录,可以用于快速引入组件
-
import Find from '@/views/Find'
-
import My from '@/views/My'
-
import Friend from '@/views/Friend'
-
-
import Vue from 'vue'
-
import VueRouter from 'vue-router'
-
Vue.use(VueRouter) // VueRouter插件初始化
-
-
// 创建了一个路由对象
-
const router = new VueRouter({
-
// routes 路由规则们
-
// route 一条路由规则 { path: 路径, component: 组件 }
-
routes: [
-
{ path: '/find', component: Find },
-
{ path: '/my', component: My },
-
{ path: '/friend', component: Friend },
-
]
-
})
-
-
export default router
声明式导航
导航链接
需求:实现导航高亮效果vue-router 提供了一个全局组件 router-link (取代 a 标签)① 能跳转 ,配置 to 属性指定路径( 必须 ) 。 本质还是 a 标签 , to 无需 #② 能高亮, 默认就会提供 高亮类名 ,可以直接设置高亮样式
两个类名
说明:我们发现 router-link 自动给当前导航添加了 两个高亮类名① router-link-active 模糊匹配 (用的多)to="/my" 可以匹配 /my /my/a /my/b ....② router-link-exact-active 精确匹配to="/my" 仅可以匹配 /my
自定义高亮类名
说明:router-link 的 两个高亮类名 太长了,我们希望能定制怎么办?
跳转传参
目标:在跳转路由时, 进行传值1. 查询参数传参2. 动态路由传参
1. 查询参数传参
① 语法格式如下to="/path ?参数名=值 "② 对应页面组件接收传递过来的值$route. query.参数名
<router-link to="/search?key=小周不摆烂">小周不摆烂</router-link>
-
<script>
-
export default {
-
name: 'MyFriend',
-
created () {
-
// 在created中,获取路由参数
-
// this.$route.query.参数名 获取
-
console.log(this.$route.query.key);
-
}
-
}
-
</script>
2. 动态路由传参
① 配置动态路由② 配置导航链接to="/path /参数值 "③ 对应页面组件接收传递过来的值$route. params.参数名
两种传参方式的区别
1. 查询参数传参 (比较适合传 多个参数 )① 跳转:to="/path ?参数名=值&参数名2=值 "② 获取:$route.query.参数名2. 动态路由传参 ( 优雅简洁 ,传单个参数比较方便)① 配置动态路由:path: "/path/参数名"② 跳转:to="/path /参数值 "③ 获取:$route.params.参数名
Vue路由
重定向
问题: 网页打开, url 默认是 / 路径,未匹配到组件时,会出现空白说明: 重定向 → 匹配path后, 强制跳转path路径语法: { path: 匹配路径, redirect: 重定向到的路径 },
-
// 创建了一个路由对象
-
const router = new VueRouter({
-
routes: [
-
{ path: '/', redirect: '/home' },
-
{ path: '/home', component: Home },
-
{ path: '/search/:words?', component: Search }
-
]
-
})
404
作用: 当路径找不到匹配时,给个提示页面位置: 配在路由最后语法:path: "*" (任意路径) – 前面不匹配就命中最后这个
编程式导航
基本跳转
问题:点击按钮跳转如何实现?编程式导航:用JS代码来进行跳转两种语法:① path 路径跳转 (简易方便)② name 命名路由跳转
路由传参
两种传参方式:查询参数 动态路由传参两种跳转方式,对于两种传参方式都支持:① path 路径跳转传参② name 命名路由跳转传参
① path 路径跳转传参
query传参动态路由传参
② name 命名路由跳转传参
query传参
动态路由传参
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgaejaj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01