zoukankan      html  css  js  c++  java
  • vue 中 $route 和 $router 的区别

    前言:在路由动态加载的时候常需要用到 router 和 route ,记下区分

    https://router.vuejs.org/zh/api/#router-%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9

    this.$router

    是 router 实例,通过 this.$router 访问路由器,相当是获得了整个路由文件。在 $router.option.routes 中,或查看到当前项目的整个路由结构具有实例方法:

    导航守卫
    router.beforeEach((to, from, next) => {
        // 必须调用next
    })
    router.beforeResolve((to, from, next) => {
      /* 必须调用 `next` */
    })
    router.afterEach((to, from) => {})
    
    动态导航到新路由
    router.push
    router.replace
    router.go
    router.back
    router.forward

    this.$route

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

    路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象。不过可以 watch (监测变化) 它。

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

    • 在组件内,this.$route
    • 在 $route 观察者回调内
    • router.match(location) 返回值
    • 导航守卫的参数。 to,from等

    通过 this.$route 访问的是当前路由,获取和当前路由有关的信息(例如做动态标签导航栏)

    fullPath: ""  // 当前路由完整路径,包含查询参数和 hash 的完整路径
    hash: "" // 当前路由的 hash 值 (锚点)
    matched: [] // 包含当前路由的所有嵌套路径片段的路由记录 
    meta: {} // 路由文件中自赋值的meta信息
    name: "" // 路由名称
    params: {}  // 一个 key/value 对象,包含了动态片段和全匹配片段就是一个空对象。
    path: ""  // 字符串,对应当前路由的路径
    query: {}  // 一个 key/value 对象,表示 URL 查询参数。跟随在路径后用'?'带的参数
  • 相关阅读:
    Python爬虫框架Scrapy
    继承
    c/c++面试题(7)零碎知识总结
    Linux网络编程(多人在线聊天系统)
    第一章 计算机系统漫游
    Linux网络编程(简单的时间获取服务器)
    虚函数(1)
    c/c++面试题(9)linux方向
    Linux网络编程的一般步骤(1)
    进程/线程介绍
  • 原文地址:https://www.cnblogs.com/CZheng7/p/13461892.html
Copyright © 2011-2022 走看看