Vue-路由-声明式导航

这篇具有很好参考价值的文章主要介绍了Vue-路由-声明式导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
  • 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

如:

<div class="footer_wrap">
  <!-- 配置导航,配置路由出口 -->
  <router-link to="/find">发现音乐</router-link>
  <router-link to="/my">我的音乐</router-link>
  <router-link to="/friend">朋友</router-link>
</div>

2. 高亮的两个类名

我们发现 router-link 自动给当前导航添加了 两个高亮类名
Vue-路由-声明式导航,Vue,vue.js,前端,javascript

  • router-link-active:模糊匹配 (用的多)
    to=“/my” 可以匹配 /my /my/a /my/b …
  • router-link-exact-active:精确匹配
    to=“/my” 仅可以匹配 /my

修改类名:router-link 的 两个高亮类名 太长了,我们希望能定制怎么办?

通过路由设置,如下:

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1", // 自定义模糊匹配类名
  linkExactActiveClass: "类名2" // 自定义精确匹配类名
})

效果如下:
Vue-路由-声明式导航,Vue,vue.js,前端,javascript

3. 跳转传参

两个情况:

3.1 查询参数传参

传参:

to="/path?参数名1=值1&参数名2=值2"

接收参数:对应页面组件接收传参数

$route.query.参数名  

3.2 动态路由传参

传参:

  • 配置动态路由 - 格式:(:key)
const router = new VueRouter({
  routes: [
    ...,
    {
      path: '/search/:words?', //如果不传参数,也希望匹配,可以加个可选符 "?",如:这里的words后面的 ?
      component: Search
    }
  ]
})
  • 配置导航链接
to="/path/参数值"

接收参数:对应页面组件接收传参数

$route.params.参数名

3.3两种传参方式的区别

查询参数传参: (比较适合传多个参数)

  • 跳转:to=“/path?参数名=值&参数名2=值”
  • 获取:$route.query.参数名

动态路由传参: (优雅简洁,传单个参数比较方便)文章来源地址https://www.toymoban.com/news/detail-798704.html

  • 配置动态路由:path: “/path/参数名”
  • 跳转:to=“/path/参数值”
  • 获取:$route.params.参数名

到了这里,关于Vue-路由-声明式导航的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中的路由导航

    声明式路由导航 router官网-起步 声明式路由导航其实就是使用官方给的router-link路由导航标签直接进行路由跳转 编程式路由导航 router官网-编程式路由导航 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现

    2023年04月23日
    浏览(45)
  • React/Vue实现路由鉴权/导航守卫/路由拦截

    1、实现思路 自己封装  AuthRoute  路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面 思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login 2、实现步骤 在 components 目录中,创建 AuthRoute/index.js 文件 判断是否登录 登录时,直接渲染相应页面组

    2024年02月15日
    浏览(38)
  • Vue3项目-配置路由及侧边栏导航栏

    1.在views 文件夹中创建文件夹 并在其中一个文件夹中创建一个vue文件  因为 没有配置TS 因此script 后面没有跟lang=\\\"ts\\\"  例如 下图所示      2.在router文件夹下面index文件中  routes数组添加重定向  其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面  compon

    2024年02月09日
    浏览(50)
  • 路由缓存问题 | vue-router的导航守卫

             带参路由,当 参数发生变化时,相同的组件实例将被复用 ,组件的 生命周期钩子不会被调用, 导致 请求不会被重新发送, 以至于 数据无法更新 。 两种解决方法: 1. 给 RouterView绑定key值 ,即 特点:不复用,破坏组件缓存,强制执行,存在一定的 浪费 ,即

    2024年02月09日
    浏览(41)
  • Vue2路由:手动配置使用路由&路由嵌套、路由动态传参(:参数,query、props)、编程式导航(back、go)、导航守卫

    过了一遍vue2的router,整理一下小结 目录 一、前端路由的概念与原理 1.1 什么是路由 1.2 路由的工作方式 二、vue-router的基本使用 2.1 安装、配置、使用router 2.2 redirect重定向 三、嵌套路由 3.1 声明子路由的规则 3.2 默认子路由 四、动态路由 4.1 动态路由的概念 4.2 动态路由取参方

    2024年02月05日
    浏览(43)
  • 前端vue入门(纯代码)35_导航守卫

    星光不问赶路人,时光不负有心人 【 33.Vue Router--导航守卫 】 导航守卫 正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住 参数或查询的改变并不会触发进入/离开的

    2024年02月16日
    浏览(41)
  • Vue路由导航(replace、push、forward、back、go)

    栈的数据结构:先进后出,后进先出。 原理:push将元素压入栈内,pop将元素弹出,栈有分别有栈底指针和栈顶指针,指向栈内最低和最高的元素。 浏览器中的前进和后退的按钮也是使用了栈的数据结构实现,但也有不同。对于浏览器而言,分别有两种属性: push属性(推进

    2024年02月06日
    浏览(40)
  • 20230706----重返学习-vue路由导航守卫相关-物美后台管理系统

    常见面试题 面试题:介绍一下 vue-router 中的导航守卫函数 面试题:介绍一下你对vue-router的理解? 导航守卫函数 面试题:介绍一下 vue-router 中的导航守卫函数 在每一次路由切换的时候,首先把路由匹配、导航确认等事宜先处理好-在此期间会触发一系列的钩子函数,这些函数

    2024年02月12日
    浏览(39)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • vue3之vite创建h5项目之2 (sass公共样式、声明组件、路由配置和layout组件 )

    pnpm i -D sass 1-1-1 main.ts 引入公共样式方式 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss ( 公共样式方法抽离 ) 1-3-3 src / style / reset.scss ( 重置样式 ) 1-3-4 src / style / variables.scss ( 定义的公共变量样式 ) 1-3-5 使用变量 3-1 路径文件

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包