$router和$route的区别

route的区别

理解:

router可以理解为一个容器管理了一组route是进行当前ULR和组件的映射关系,它包含了很多的属性和对象(比如history对象),任何页面都可以调用他的push(),replace(),go()等方法

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/about',
      name: 'about',
      component: about,
      beforeEnter:(to,from,next)=>{
        // console.log('路由独享守卫to',to);
        // console.log('路由独享守卫from',from);
        next()
      }
    }
  ]
})

$route是当前激活的路由,包含了当前激活的路由状态信息,它包含了当前URL解析得到的信息.

$router对象的属性

$router.app: 配置了router的Vue根实例
$router.mode: 路由使用的模式
$router.currentRoute: 当前路由对应的路由信息对象

$router钩子函数调用顺序图

vue-router-调用顺序图.jpeg

$router对象方法

$router.beforeEach(to,from,next):是$router的钩子函数,全局前置守卫,异步解析执行,通常做一些拦截比如:登录拦截.
$router.beforeResolve(to,from,next): 和$router.beforeEach(to,from,next)基本类似,区别是:$router.beforeResolve(to,from,next)的调用时机是在beforeEach和组件内的beforeRouteEnter之后,afterEach之前调用.
$router.afterEach(to, from): 全局后置钩子他是在路由跳转完成后触发，参数包括to,from没有了next,他发生在beforeEach和beforeResolve之后，beforeRouteEnter之前.
$router.push: 编程式导航,使用push方法,会导航到不同的URL,会想history添加新的记录,
$router.replace: 和push很像,区别是它不会向history添加记录,会替换当前的history.
$router.go(n): 方法的参数是一个整数, 会在history记录中向前或者后退多少步,和window.history.go(n)类似
$router.back(): 编程式导航，后退一步记录，等同于$router.go(-1)。
$history.forward(): 编程式导航，前进一步记录，等同于$router.go(1)。

router.resolve: 解析目标位置,格式和的to prop相同，current是当前默认的路由.使用场景如下:

使用router.resolve自定义一个页面跳转的方法

Vue.prototype.$linkTo = function ({ path, query, type }) {
  if (typeof (arguments[0]) != 'object') {
    // 跳转路径
    path = arguments[0];
  }
  // 请求参数
  query = query || {};
  // 跳转类型
  type = type || '_self';
  let routeData = router.resolve({
    path: path,
    query: query || {}
  })
  console.log('router.resolve()的返回值：', routeData)
  window.open(routeData.href, type);
}

调用


点击这么button后会跳转到about页面,resolve的作用就是解析参数成一个完整的url

$route对象属性

$route.path: 返回字符串,对应当前路由的路径
$route.parms: 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.fullPath: 完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.name: 当前路由的名称，如果有的话