您的位置: 首页  >  文章  >  vue-router使用详解回顾

vue-router使用详解回顾

分类: 文章 • 2025-05-10 11:45:34

官方文档参考地址：https://router.vuejs.org/zh/

vue-router 原理图：

 

vue-router使用详解回顾

 

1.router-link

（1）to属性： to (required) | type: string | Location

简述：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象

使用案例：

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 支持属性绑定 -->
<router-link v-bind:to="'home'">Home</router-link>
<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）replace 属性 （type: boolean | default: false）

简述：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录

使用案例：

<router-link :to="{ path: '/myself-page}" replace></router-link>

（3）append 属性（type: boolean | default: false）

简述：设置 append 属性后，则在当前（相对）路径前添加基路径。例如，从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

使用案例：

# 首先从一个页面触发下面的router-link ，当前页面的url为：http：localhost:8080/a

<router-link :to="{ path: '/b}" append></router-link>

# 最终去到的页面url为：http：localhost:8080/a/b


（4）tag属性 （type: String | defualt: ‘a’）

简述：　有时想要 router-link 渲染成某种标签，例如 li标签。 于是使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

  <router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染结果 -->
  <li>foo</li>

（5）active-class 属性 （type: String | default: router-link-active）

简述：设置链接**时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置

使用案例：

export default new Router({ linkActiveClass : ‘my-active-class’})
<router -link class=”a” tp=”/a” active-class=”my-active-class”></router-link>

注：【如何将"**时的CSS类名"应用在外层元素】

<router-link tag="li" to="/foo">
  <a>跳转到foo页面</a>
</router-link>

　在这种情况下，<a> 将作为真实的链接（它会获得正确的 href 的），而 "**时的CSS类名" 则设置到外层的 <li>

（6）exact （type: Boolean | default: false）

简述：是否**默认类名的依据是 inclusive match （全包含匹配）。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名

使用案例：

// 这个链接只会在地址为 / 的时候被** 
<router-link to="/" exact>Home</router-link>

<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！

（7）events （type: Array<String> | default: ‘click’）

简述：声明可以用来触发导航的事件（默认是‘click‘）。可以是一个字符串或者是一个包含字符串的数组

 

2.router-view

概述：<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件

（1）name属性 （type: String | default: ‘default’）

简述：如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应name的组件；因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

3.路由钩子（路由对象）

简述：表示当前**的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）；路由信息对象是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。路由对象出现在多个地方，包括如下：

（1）组件内的 this.$route 和 $route watcher 回调（监测变化处理）

使用案例：（在父组件中实现）
# watch $route 决定使用哪种过渡

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

3-1-1. router.match(location)  的返回值
3-1-2. 导航钩子的参数

router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象
})

3-1-3. scrollBehavior 方法的参数
 

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 都是路由对象
  }
})

（2）路由对象的属性

$route.path 返回当前路由路径，绝对路径，如 ”/a/b”
$route.params 返回路由的params的参数对象
$route.query 返回路由的query查询对象
$route.hash 返回当前路径的 #后面的字符串
$route.fullPath 返回完成解析后的 URL，包含查询参数和 hash 的完整路径
$route.matched 路由记录 返回数组记录routes 
$route.name 返回路由的name
$route.$route.redirectedFrom 如果存在重定向，即为重定向来源的路由的名字

详细解释，请参考文档地址：
https://router.vuejs.org/zh/api/#路由对象属性


打印结果：console.log( this.$route )

vue-router使用详解回顾


4.路由实例对象 

（1）属性

$router.app
$router.mode
$router.currentRoute

（2）方法

$router.beforeEach(guard)
$router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成
$router.afterEach(hook):增加全局的导航钩子
$router.push(location, onComplete?, onAbort?)
$router.replace(location, onComplete?, onAbort?)
$router.go(n)
$router.back()
$router.forward():动态的导航到一个新 url
$router.getMatchedComponents(location?) 返回目标位置或是当前路由匹配的组件数组

打印：console.log(this.$router.getMatchedComponents())

vue-router使用详解回顾


$router.resolve(location, current?, append?)
解析目标位置（格式和 <router-link> 的 to prop 一样），返回包含如下属性的对象

{
　　location:Location;
　　route:Route;
　　href:string;
}

$router.addRoutes(routes) 
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组

$router.onReady(callback)
添加一个会在第一次路由跳转完成时被调用的回调函数。此方法通常用于等待异步的导航钩子完成，比如在进行服务端渲染的时候


5.组件注入

$route 、$router

相关推荐