vue-router 常用API

电玩女神 2021-09-15 03:00 328阅读 0赞

一.Router 实例---方法

1.增加全局的导航守卫 参考导航守卫。
    	router.beforeEach(guard)
    	router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成
    	router.afterEach(hook)
    
    
    2.动态的导航到一个新 URL。参考编程式导航。
    	router.push(location, onComplete?, onAbort?)
    
    	router.replace(location, onComplete?, onAbort?)
    	router.go(n)
    	router.back()
    	router.forward()
    
    
    3.router.getMatchedComponents(location?)
    	返回目标位置或是当前路由匹配的组件数组（是数组的定义/构造类，不是实例）。通常在服务端渲染的数据预加载时时候。
    
    4.router.resolve(location, current?, append?)
    
    	解析目标位置（格式和 <router-link> 的 to prop 一样），返回包含如下属性的对象：
    
    	{
    	  location: Location;
    	  route: Route;
    	  href: string;
    	}
    	current 是当前默认的路由 (通常你不需要改变它)
    	append 允许你在 current 路由上附加路径 (如同 router-link)
    	
    5.router.addRoutes(routes)
    	动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
    
    6.router.onReady(callback, [errorCallback])
    	该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。
    
    	这可以有效确保服务端渲染时服务端和客户端输出的一致。
    
    	第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。
    
    7.router.onError(callback)
    
    	注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：
    
    	错误在一个路由守卫函数中被同步抛出；
    
    	错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
    
    	渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

二.路由信息对象

一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。

路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

路由对象出现在多个地方:

1.在组件内，即 this.$route
    
    2.在 $route 观察者回调内
    
    3.router.match(location) 的返回值
    
    4.导航守卫的参数：
    router.beforeEach((to, from, next) => {
      // `to` 和 `from` 都是路由对象
    })
    
    5.scrollBehavior 方法的参数:
    
    const router = new VueRouter({
      scrollBehavior (to, from, savedPosition) {
        // `to` 和 `from` 都是路由对象
      }
    })

三.路由信息对象的属性

1.$route.path
    字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
    
    2.$route.params
     一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
    
    3.$route.query
    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
    
    4.$route.hash
    当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
    
    5.$route.fullPath
    完成解析后的 URL，包含查询参数和 hash 的完整路径。
    
    6.$route.matched
    类型: Array<RouteRecord>
    一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
    
    const router = new VueRouter({
      routes: [
        // 下面的对象就是路由记录
        { path: '/foo', component: Foo,
          children: [
            // 这也是个路由记录
            { path: 'bar', component: Bar }
          ]
        }
      ]
    })
    当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
    
    7.$route.name
    
    当前路由的名称，如果有的话。(查看命名路由)
    
    8.$route.redirectedFrom
    
    如果存在重定向，即为重定向来源的路由的名字。(参阅重定向和别名)

四.router-link

router-link是一个组件，它默认会被渲染成一个带有链接的a标签

注意：被**选中**的router-link将自动添加一个class属性值.**router-link-active**,

1.属性配置

a.to  表示路由的链接
    当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
    	EG:
    	
    	<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>
    
    	
    	<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
    
    b.replace 布尔类型，默认为false。
    当点击时,会调用 router.replace()而不是 router.push(). 如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。
    	EG:
    	<router-link to="goods" replace></router-link>
    	<router-link :to="{ path: '/abc'}" replace></router-link>
    
    
    
    c.tag  router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。
    	EG:
    		
    	   <router-link to="goods" tag="li"></router-link>
       
    D.event事件 默认值: 'click'
    声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

2.将激活 class 应用在外层元素 li

有时候我们要让激活 class 应用在外层元素，而不是 <a> 标签本身，那么可以用 <router-link> 渲染外层元素，包裹着内层的原生 <a> 标签：
    <router-link tag="li" to="/foo">
      <a>/foo</a>
    </router-link>
    在这种情况下，<a> 将作为真实的链接（它会获得正确的 href 的），而 "激活时的CSS类名" 则设置到外层的 <li>。

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

1.可以给router-view组件设置transition过渡

具体用法见[Vue2.0 Transition常见用法全解惑][Vue2.0 Transition]。

2.配合<keep-alive>使用，

keep-alive可以缓存数据，这样不至于重新渲染路由组件的时候，之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b，再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。如果你的应用里有一个购物车组件，就需要用到keep-alive。

[Vue2.0 Transition]: http://hyuhan.com/2016/12/08/vue-transition/