router-link (opens new window)

router-link与a标签的区别，router-link可以在不重载页面情况下更改url，a标签会刷新页面

<router-link to="/about">Go to About</router-link>

router-view

router-view 将显示与 url 对应的组件

  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

history (opens new window)

路由器使用的历史记录模式,有createWebHistory、createWebHashHistory两种模式可选。

• createWebHistory
    它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法来实现路由跳转。 如：/home、/about，但是这种模式要求你的服务端配置支持 index.html 的单页应用，否则在页面刷新的时候会出现 404 错误。
• createWebHashHistory
    它将路由添加到 URL 中的 hash 中，例如：/#/home、/#/about。这种模式无需后端配置即可正常使用, 但是不利于做seo优化

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Container from '../components/container/src/index.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Container,
    children: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/chooseIcon',
        component: () => import('../views/chooseIcon/index.vue')
      }
    ]
  }
]

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

router 实例

app.use(router) 后

1.获取创建的路由实例

• vue2 this.$router
• vue3 useRouter

2.获取当前访问路由对象

• vue2 this.$route
• vue3 useRoute

路由守卫 (opens new window)

路由守卫分为全局守卫、路由独享守卫、组件内守卫。
router.beforeEach 可以在路由跳转前做一些操作（判断登录状态、权限）

router.afterEach 是路由跳转结束后的回调，常用来结束一些副作用状态