Vue Router学习(一)—— 初识路由

前言

vue是单页面应用,在一个单页面中进入子页面或者跳转到其他页面离不开路由的帮助,与vue相辅的路由插件是vue-router,如果让你手写vue-router配置项或者排查问题,这时候就需要扎实的基础,并且vue-router4.x都有了ts类型定义,学习vue-router肯定会有所收获。

路由

当我们接触开源项目时,vue-router已经与vue绑定了,基础路由也已经写好,看起来vue-router可有可无,但是如果我们把路由去掉,想要进入子页面就会变得很麻烦,比如我们有一个主页面跟一个子页面,没有路由该如何实现两个页面之间的跳转呢?一种简单的方式的是通过v-show或v-if根据变量去判断:

js 复制代码
   <div>
    <A v-show="pageNo === 1"></A>
    <B v-show="pageNo === 2"></B>
  </div>

假设A是父页面,B是子页面通过修改pageNo的值去显示不同的组件,这种方法很受限制,父子页面之间的传参也麻烦,特别是子页面一多,各种交互就会很麻烦,后续维护起来也很难受(我就做过类似的项目,刚接手的时候想'死'的心都有了)。而路由就让这个过程变得很简单,直接用this.$router.push想跳到哪个页面都行。除此之外还可以使用a标签,路由在页面也是显示为a标签,但是路由不会重新加载页面,就能直接更改url。有了对比才更加明显,路由方便了许多。

router-link

router-link是可以包裹链接的组件,跟a标签基本一样,并且它会在页面上渲染a标签。相比于a标签,router-link不会在路由修改时重新加载页面,因为它会守卫点击事件,而且跳转链接只需要写相对路径就行。我们翻下源码,可以找到router-link会render成a标签。

router-link的ts接口定义为RouterLinkProps,也就是router-link的接收参数:

  • to:跳转的路由链接,接收字符串或者路由对象,使用对象时候我们可以传参。
js 复制代码
    <router-link to="my-page"></router-link>
    <router-link to="{name:'my-page',params:{a:'1'}}"></router-link>

具体的ts类型为RouteLocationRaw

  • replace:是否替换路由,接收布尔值,如果为false,那么点击跳转就会是router.replace。
  • activeClass:点击后的样式,类似于a标签点击后的伪类选择器。
  • exactActiveClass:点击后的样式,跟acitveClass不同,它是需要严格匹配路由才会触发。 针对以上两个参数,我们可以简单写个demo,我们在/table页面中用router-link写下跳转路由。
js 复制代码
  <router-link to="/">first</router-link>
  <router-link to="/table">second</router-link>

此时页面两个路由就是初始样式,当我们设置activeClass时,会发现两个路由都受影响了。

js 复制代码
.router-link-active {
  border: 1px solid red;
}

当我们换成严格匹配时,链接到/table的才会受影响,我们此时在/table页面中。

js 复制代码
   .router-link-exact-active {
  border: 1px solid red;
}
  • ariaCurrentValue:aria-current的值,了解即可。
  • custom:是否使用自定义链接,设置为true时,配合着v-slot使用,通过v-slot获取参数,在自定义的链接中使用。

router-view

router-view:用来显示组件,在vue中一个路由会有着对应的vue文件,如果只使用router-link跳转路由,而没有使用router-view那么页面就会是空白的,router-view就像窗口将路由对应的组件展示出来啦。 router-view的参数很简单:

  • name:组件名称,渲染出名称对应的页面。
  • route:路由对象。
    router-view是用来渲染视图的组件,外面可以包裹transition做动画过渡效果,也可以用keep-alive缓存组件。

总结

Vue Router极大地方便我们进行页面之间的跳转,让vue单页面应用使用起来更加方便,而router-link与router-veiw是跳转路由与展示页面的组件,这两个组件的含义是要牢记于心的。

相关推荐
飞天大河豚12 分钟前
2025前端框架最新组件解析与实战技巧:Vue与React的革新之路
vue.js·react.js·前端框架
MickeyCV23 分钟前
Nginx学习笔记:常用命令&端口占用报错解决&Nginx核心配置文件解读
前端·nginx
祈澈菇凉40 分钟前
webpack和grunt以及gulp有什么不同?
前端·webpack·gulp
zy0101011 小时前
HTML列表,表格和表单
前端·html
初辰ge1 小时前
【p-camera-h5】 一款开箱即用的H5相机插件,支持拍照、录像、动态水印与样式高度定制化。
前端·相机
HugeYLH1 小时前
解决npm问题:错误的代理设置
前端·npm·node.js
六个点2 小时前
DNS与获取页面白屏时间
前端·面试·dns
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医疗报销系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
道不尽世间的沧桑2 小时前
第9篇:插槽(Slots)的使用
前端·javascript·vue.js
B站计算机毕业设计超人2 小时前
计算机毕业设计SpringBoot+Vue.jst房屋租赁系统(源码+LW文档+PPT+讲解)
vue.js·spring boot·后端·eclipse·intellij-idea·mybatis·课程设计