前言:vue-router是什么?为什么我们不像原来一样直接用 a 标签编写链接?如何使用?常见路由操作有哪些?
Vue Router是什么
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
注意:
route
指的是当前页面的所有路由信息,
router
是路由的方法。
router-link
<router-link to="xxx" tag=" ">
// 将原本用a标签跳转的功能用router-link实现
// to是指要跳转到的目录,tag是这个点击跳转标签的样式,可以是li的样式等等
router-link-exact-active
: 路由完全匹配,当前选中
router-link-active
: 路由不完全匹配
to
: 表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以,就像绑定别的属性一样 --&