vue3 路由

路由（router）：

就是对应关系

前端路由的工作方式：

1.用户点击了页面上的路由链接

2.导致了URL地址栏中的hash值发生了改变

3.前端路由监听到了hash地址的变化

4.前端路由吧当前hash地址对应的组件渲染到浏览器中

history原理

history模式主要使用两个HTML5 history新增的api，history下的pushState() 和 repalceState()

pushState会增加一条新的历史记录，replaceState会替换当前的历史记录，具体的各位老哥查下就好，主要的是，这两个API不会引起页面的刷新，也就符合前端路由的特性。

History 路由API

• back()：后退到上一个路由；
• forward()：前进到下一个路由，如果有的话；
• go(number)：进入到任意一个路由，正数为前进，负数为后退；
• pushState(obj, title, url)：前进到指定的URL，不刷新页面；
• replaceState(obj, title, url)：用URL替换当前的路由，不刷新页面；

前3个方法只是路由历史记录的前进或者后退，而pushState和replaceState这两个方法提供了对历史记录进行添加和修改的功能(HTML5新增)，可以跳转到指定的URL。pushState和replaceState可以实现无刷新的改变地址栏，并且通过传入的state记录历史。以上五个方法都是无刷新的改变了URL地址栏。

带参数的动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。 

响应路由参数的变化#

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

路由的匹配语法

大多数应用都会使用 /about 这样的静态路由和 /users/:userId 这样的动态路由，就像我们刚才在动态路由匹配中看到的那样，但是 Vue Router 可以提供更多的方式！

为了简单起见，所有的路由都省略了 component 属性，只关注 path 值。

 

在参数中自定义正则#

当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，所以我们需要一种方法来区分它们。最简单的方法就是在路径中添加一个静态部分来区分它们：

const routes = [
  // 匹配 /o/3549
  { path: '/o/:orderId' },
  // 匹配 /p/books
  { path: '/p/:productName' },
]

但在某些情况下，我们并不想添加静态的 /o /p 部分。由于，orderId 总是一个数字，而 productName 可以是任何东西，所以我们可以在括号中为参数指定一个自定义的正则：

const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]

现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName。routes 数组的顺序并不重要!