入门 Vue Router

Vue Router

Vue Router插件做了什么？

1. 全局注册 RouterView 和 RouterLink 组件。
2. 添加全局 $router 和 $route 属性。
3. 启用 useRouter() 和 useRoute() 组合式函数。
4. 触发路由器解析初始路由。

标签介绍

• RouterView

  加载指定页面

  <RouterLink to="/home">首页</RouterLink>
  <!-- 类似 -->
  <a href="home.html">首页</a>
  

  不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。

  这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。

• RouterView

  渲染当前 URL 路径

  <RouterView />
  <!-- 类似 -->
  <iframe />
  

  RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。

  它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

函数

• createMemoryHistory()

  忽略浏览器的 URL 而使用其自己内部的 URL。

  如路由演练场的demo，路由与浏览器的URL变化不相关，而是内部路由操作而改变。

  • 使用方式：

    const router = createRouter({
      history: createMemoryHistory(),
      routes
    })
    

  • 注意事项

    它不会有历史记录，这意味着你无法后退或前进。

• createWebHistory()

  创建一个 HTML5 历史。对于单页应用来说这是最常见的历史。(官方推荐)

  • 使用方式：

    import { createRouter, createWebHistory } from 'vue-router'
    
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        //...
      ]
    })
    

  • 呈现样式

    https://example.com/user/id
    

• createWebHashHistory()

  创建一个 hash 模式的历史。在没有主机的 web 应用 (如 file://) 或无法通过配置服务器来处理任意 URL 的时候非常有用。

  • 使用方式

    import { createRouter, createWebHashHistory } from 'vue-router'
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes: [
        //...
      ]
    })
    

  • 呈现样式

    https://example.com/#/
    

• useRouter()

  返回路由器实例

  addRoute | afterEach | back | beforeEach | beforeResolve | currentRoute | forward | getRoutes | go | hasRoute | install | isReady | listening | onError | options | push | removeRoute | replace | resolve
  

  使用区分

  // 选项式
  this.$router
  
  // 组合式
  useRouter()
  

• useRoute()

  返回当前的路由地址

    fullPath | hash | matched | meta | name | params | path | query | redirectedFrom
  

  使用区分

  // 选项式
  this.$route
  
  // 组合式
  useRoute()
  

useRoute 介绍

属性介绍

• fullPath

  包括 search 和 hash 在内的完整地址。该字符串是经过百分号编码的。

• hash

  当前地址的 hash。如果存在则以 # 开头。

• matched

  RouteLocationMatched 数组，只包含直接的组件 (任何已被加载并在 components 对象内被替换掉的懒加载组件)。所以它可以被直接用于展示路由。同样它不包含重定向的记录。

• meta

  从所有匹配的路由记录中合并的 meta 属性。

• name

  匹配的路由名称。

• params

  从 path 中提取出来并解码后的参数对象。

• path

  经过百分号编码的 URL 中的 pathname 段。

• query

  代表当前地址的 search 属性的对象

• redirectedFrom

  包含在重定向到当前地址之前，我们最初想访问的地址。

useRouter介绍

属性介绍

• listening

  允许关闭历史事件的监听器。这是一个为微前端提供的底层 API。

• options

  创建路由器时的原始选项对象。

• currentRoute

  当前路由信息对象。

方法介绍

• addRoute

  添加一个新的路由记录，将其作为一个已有路由的子路由。

• afterEach

  添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。

• back

  通过调用 history.back() 在可能的情况下在历史中后退。相当于 router.go(-1)。

• beforeEach

  添加一个导航钩子，它会在每次导航之前被执行。返回一个用来移除该钩子的函数。

• beforeResolve

  添加一个导航守卫，它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。

• forward

  通过调用 history.forward() 在可能的情况下在历史中前进。相当于 router.go(1)。

• getRoutes

  获得所有路由记录的完整列表。

• go

  允许你在历史中前进或后退。相当于 router.go()。

• hasRoute

  检查一个给定名称的路由是否存在。

• isReady

  返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。如果初始导航已经发生，则该 Promise 会被立刻解析。

  这在服务端渲染中确认服务端和客户端输出一致的时候非常有用。注意在服务端你需要手动加入初始地址，而在客户端，路由器会从 URL 中自动获取。

• onError

  添加一个错误处理器，它会在每次导航遇到未被捕获的错误出现时被调用。其中包括同步和异步被抛出的错误、在任何导航守卫中返回或传入 next 的错误、尝试解析一个需要渲染路由的异步组件时发生的错误。

• push

  程序式地通过将一条记录加入到历史栈中来导航到一个新的 URL。

• removeRoute

  根据其名称移除一个现有的路由。

• replace

  程序式地通过替换历史栈中的当前记录来导航到一个新的 URL。

• resolve

  返回一个路由地址的规范化版本。同时包含一个包含任何现有 base 的 href 属性。默认情况下，用于 router.currentRoute 的 currentLocation 应该在特别高阶的用例下才会被覆写。