vue的路由知识

最新推荐文章于 2024-10-12 10:41:56 发布

chuohuizhen7741

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3058876/blog/2208117

版权

Vue Router是Vue.js官方的路由管理器，和Vue.js的核心深度集成，使用vue.js构建单页面应用更加容易。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
细粒度的导航控制
带有自动激活的Css class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

用Vue.js + Vue Router构建单页应用是非常简单的，使用vue.js我们已经可以通过组合组件来组成应用程序，当要把Vue Router添加进来，我们需要做的是，将组件映射到路由，然后告诉Vue Router在哪里渲染它们。

起步

定义路由组件
定义路由，引用路由组件
创建路由实例
创建和挂载根实例
标签'router-link'跳转或者使用函数"this.$router.push('/')"跳转，理由匹配到的组件会渲染到"router-view"标签中；

<!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接；<router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<!-- 路由出口，路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

动态路由匹配

根据模式匹配，将满足某种模式的路由都使用同一个组件进行渲染，比如查看详情时，不同id渲染的结果使用同一个组件；主要使用路径参数的方式进行实现，路径参数使用冒号:标记：

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

组件内部使用this.$route.params.id获取。除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等

当使用路由参数时，当路由改变原来的组件会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用更加高效。不过，这也意味着组件的生命周期钩子函数不会再被调用。

复用组件时，如果相对路由参数的变化作出相应，可以用watch监听$route对象。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用2.2引入的beforeRouteUpdate导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

vue-router使用path-to-regexp作为路径匹配引擎，所以支持更多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，以及其它自定义正则匹配。路由定义中，先定义的优先级高。

嵌套路由

组件内部依然可以有router-view标签作为渲染出口，如果要在嵌套的出口中渲染组件，则需要在VueRouter的参数中使用children配置，children支持多层嵌套。

编程式导航

前面提到过，除了使用router-link创建a标签定义导航链接，还可以借助router的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

这个方法会向history栈添加一条新的记录，所以当用户点击浏览器回退按钮时，则回到之前的URL。实际上，点击router-link标签时，内部也是调用此方法实现。前者为声明式，后者为编程式。与push方法同级的还有router.replace(location, onComplete?, onAbort?)，router.go(n)