基础

Vue Router 是客户端路由 在 SPA 中奖 URL 与呈现给用户内容相绑定，更新 URL 但不要从服务器重新加载。

示例

用原生的 nav 标签创建一个导航区，但是使用 RouterLink 来创建导航链接，可以在不重载的情况下处理 URL 的相关功能。

<nav>
  <RouterLink to="/">Go to Home</RouterLink>
  <RouterLink to="/about">Go to About</RouterLink>
</nav>

创建实例

import { createMemoryHistory, createRouter } from 'vue-router'

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]//路由表

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

注册插件

app.use(router)

职责：

1. 全局注册 RouterView 和 RouterLink 组件（不需要在组件模板中导入）。
2. 添加全局 $router 和 $route（当前路由详细属性：路径、查询参数、hash值） 属性。
3. 启用 useRouter() 和 useRoute() 组合式函数。
4. 触发路由器解析初始路由。

访问路由器和当前路由

路由器实例将被暴露为 $router， 可以通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由。

动态路由匹配

动态替换一个 path 中的参数以动态生成 url 匹配页面。 1.:匹配

const routes = [
  { path: '/user/:id', component: User }
];

/users/johnny 和 /users/jolyne 都可以被指向同一个页面。 从而可以在组件中通过 $route.params 拿到 url 传参的 id 当切换 url 但是匹配指向同一个页面时，组件实例不会销毁重建，而是直接复用（相应生命周期钩子也不会被调用）。如果要对参数变化做出响应，直接 watch 那个 params 即可。 2. 正则匹配 3.

导航守卫

拦截路由导航不同阶段，以插入自定义的逻辑，以实现诸如权限验证、页面重定向、数据预加载等。

全局守卫

• beforeEach：在每次导航之前执行，决定是否允许进入某个路由。
• beforeResolve：在所有组件内守卫和异步路由组件解析完成后触发。
• afterEach：导航完成后执行（不会改变导航结果）。