【Vue Router】学习（超详细）

router-link

支持用户在具有路由功能的应用中点击导航

1，to（必选参数）：类型string/location

表示目标路由的链接,当被点击后，内部会立刻把 to 的值传到 router.push()

<!-- 类似于渲染结果 -->
<a href="/home">Home</a>
<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
<!-- 带查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

2，tag ：类型string

有时候想要 渲染成某种标签。 可以使用 tag prop 类指定何种标签，同样它还是会监听点击

  例如，这个就是变为li标签
 <router-link to="/ve_index" tag="li">案例介绍</router-link>

3，replace：类型boolean/默认false

设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()，所以导航后不会留下历史记录。

<router-link to="/abc" replace></router-link>

4，active-class：类型string/默认"router-link-active" (或者全局 linkActiveClass)

链接激活时，应用于渲染的 的 class,就是当前链接被激活的样式

aria-current-value：类型’page’ | ‘step’ | ‘location’ | ‘date’ | ‘time’ | ‘true’ | ‘false’ (string)/默认page

当链接激活时，传递给属性 aria-current 的值。

5，custom：类型boolean/默认false

是否应该将其内容包裹在 a标签 元素中

<router-link to="/home" custom v-slot="{ navigate, href, route }">
  <a :href="href" @click="navigate">{{ route.fullPath }}</a>
</router-link>
渲染为：
<a href="/home">/home</a>

6，exact-active-class：类型string/默认值：“router-link-exact-active” (或者全局 linkExactActiveClass)

链接精准激活时，应用于渲染的 a 的 class。

7，v-slot

记得把 custom 配置传递给 router-link>，以防止它将内容包裹在 a标签 元素内。

8，router-link和a标签两者区别

: history模式时，router-link会守卫单击事件，让浏览器不再重新加载页面

history模式时，使用base选项后，所有的to属性都不需要写 基路径

router-view

name 类型：string

如果 设置了 name，则会渲染对应的路由配置中 components 下的相应组件

route

一个路由地址的所有组件都已被解析（如果所有组件都被懒加载），因此可以显示。

路由对象的两个属性，mode(模式)，base(基路径)

mode(模式)

vue-router默认是hash模式,使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会进行重新加载,url地址为（http://www.***.com/#/home）

另一种模式就是history模式，而history模式是利用h5 history.pushState API 来完成 URL 跳转，无须重新加载页面,http://www.***.com/home）

base(基路径)

默认是“/”，当设置基路径的时候，访问http://localhost:8080/和访问http://localhost:8080/home是一样的

常见问题

如何让路由选中时候，具有选中效果,并且解决路由为/时候的默认选中

• exact添加强制匹配属性
• 或者在路由js下，LinkExactActiveClass：‘active’

<li class="nav-item navtxt">
    <router-link to="/" active-class="active" exact>首页</router-link>
</li>
<li class="nav-item navtxt">
    <router-link to="/about" active-class="active">租赁信息</router-link>
</li>