Vue Router(v4.x) 入门指南

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

第一章 入门

router 路由，因为vue是单页应用不会有那么多html让我们跳转所以要使用路由做页面的跳转，Vue 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue 可以实现多视图的单页Web应用。

构建前端项目

npm init vue@latest
//或者
npm init vite@latest

安装vue-router

// 目前默认版本是4.x版本
yarn add vue-router

在src目录下面新建router文件夹，然后在router文件夹下面新建index.js

//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 
//vue2 mode history => vue3 createWebHistory
//vue2 mode  hash  => vue3  createWebHashHistory
//vue2 mode abstact => vue3  createMemoryHistory
 
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
},{
    path: '/b',
    component: () => import('../components/b.vue')
}]
 
 
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

• router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

• router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<template>
  <div>
    <h1>只会番茄炒蛋</h1>
    <div>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">跳转a</router-link>
      <router-link style="margin-left:200px" to="/b">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

最后在main.js挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'


createApp(App)
    .use(router)
    .mount('#app')

第二章 命名路由 or 编程式导航

命名路由

除了path之外，还可以为任何路由提供name。这有以下几点优势：

• 没有硬编码的 URL
• params 的自动编码/解码。
• 防止你在 url 中出现打字错误。
• 绕过路径排序（如显示一个）

const routes = [
    {
        path: '/',
        name: 'A',
        component: () => import('../components/a.vue')
    },
    {
        path: '/b',
        name: 'B',
        component: () => import('../components/b.vue')
    },
]

router-link跳转的方式可以变更对象

<template>
  <div>
    <h1>只会番茄炒蛋</h1>
    <div>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link :to="{ name: 'A' }">跳转a</router-link>
      <router-link style="margin-left:200px" :to="{ name: 'B' }">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

• 字符串模式

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = () => {
  router.push('/')
}

• 对象模式

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = () => {
  router.push({
    path: '/'
  })
}

• 命名路由模式

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = () => {
  router.push({
    name: 'A'
  })
}

• a标签跳转

直接通过a href也可以跳转, 但是会刷新页面

 <a href="/b">a标签跳转</a>

第三章 历史记录

replace的使用

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中不会重复保存记录，而是替换原有的vue组件；

• router-link 的使用方式

<router-link replace :to="{ name: 'A' }">跳转a</router-link>
<router-link replace style="margin-left:200px" :to="{ name: 'B' }">跳转b</router-link>

• 编程式导航

import { useRouter } from 'vue-router'

const router = useRouter()

const redirectTo = () => {
  router.replace({
    name: 'A'
  })
}

• 横跨历史

该方法采用了一个整数作为参数，表示在历史堆栈中前进或后头多少步

import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = () => {
  // 前进，数量不限于1
  // router.go(1)
  
  // 后退，数量不限于1
  // router.go(-1)
  
  // 后退
  router.back()
}

第四章 路由传参

query路由传参

编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query属性

import { useRouter } from 'vue-router'

const Router = useRouter()

const navigateTo = () => {
  Router.push({
    name: 'A',
    query: {
      name: '只会番茄炒蛋',
      age: 18
    }
  })
}

接受参数使用 useRoute 中的query

import { useRoute } from 'vue-router'

const route = useRoute()

<div>名字：{{route.query.name}}</div>
<div>年龄：{{route.query.age}}</div>

动态路由传参

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

const routes = [
    {
        path: '/user/:id', // 动态字段以冒号开始
        name: 'User',
        component: () => import('../components/user.vue')
    }
]

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

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params)

二者的区别

• query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

• query 在路由配置不需要设置参数，而 params 必须设置

• query 传递的参数会显示在地址栏中

• params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;

• 路由配置

第五章 嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构。

const routes = [
    {
        path: '/user',
        name: 'User',
        component: () => import('../components/user.vue'),
        children: [{
            path: 'man',
            name: 'Man',
            component: () => import('../components/man.vue')
        }, {
            path: 'woman',
            name: 'WoMan',
            component: () => import('../components/woman.vue')
        }]
    },
]

如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。

! 不要忘记在嵌套路由的页面增加router-view

第六章 命名视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 
const routes = [
    {
        path: "/",
        components: {
            default: () => import('../components/layout/menu.vue'),
            header: () => import('../components/layout/header.vue'),
            content: () => import('../components/layout/content.vue'),
        }
    },
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

对应router-view 通过name 对应组件

<div>
    <router-view></router-view>
    <router-view name="header"></router-view>
    <router-view name="content"></router-view>
</div>

第七章 重定向 or 别名

重定向

• 字符串形式配置

当访问/user 会重定向到 /user/man

const routes = [
    {
        path: '/user',
        name: 'User',
        redirect: '/user/man',
        component: () => import('../components/user.vue'),
        children: [{
            path: 'man',
            name: 'Man',
            component: () => import('../components/man.vue')
        }, {
            path: 'woman',
            name: 'WoMan',
            component: () => import('../components/woman.vue')
        }]
    },
]

• 对象形式配置

const routes = [
    {
        path: '/user',
        name: 'User',
        redirect: { path: '/user/man' },
        component: () => import('../components/user.vue'),
        children: [{
            path: 'man',
            name: 'Man',
            component: () => import('../components/man.vue')
        }, {
            path: 'woman',
            name: 'WoMan',
            component: () => import('../components/woman.vue')
        }]
    },
]

• 函数形式（可以传递参数）

const routes = [
    {
        path: '/user',
        name: 'User',
        redirect: (to) => {
            return {
                path: '/user/man',
                query: to.query
            }
        },
        component: () => import('../components/user.vue'),
        children: [{
            path: 'man',
            name: 'Man',
            component: () => import('../components/man.vue')
        }, {
            path: 'woman',
            name: 'WoMan',
            component: () => import('../components/woman.vue')
        }]
    },
]

别名

别名，意味着当用户访问别名和访问当前路径显示的组件是一样的。

const routes = [
    {
        path: '/user',
        name: 'User',
        alias: ['/user1', '/user2'],
        redirect: (to) => {
            return {
                path: '/user/man',
                query: to.query
            }
        },
        component: () => import('../components/user.vue'),
        children: [{
            path: 'man',
            name: 'Man',
            component: () => import('../components/man.vue')
        }, {
            path: 'woman',
            name: 'WoMan',
            component: () => import('../components/woman.vue')
        }]
    },
]

第八章 导航首位

• 全局前置守卫

router.beforeEach((to, form, next) => {
    console.log(to, form);
    next()
})

每个守卫方法接收三个参数：

to: Route， 即将要进入的目标 路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

使用案例

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const whileList = ['/']
 
router.beforeEach((to, from, next) => {
    NProgress.start()
    let token = localStorage.getItem('token')
    //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
    if (whileList.includes(to.path) || token) {
        next()
    } else {
        next({
            path:'/login'
        })
    }
})

• 全局后置守卫

和前置守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

使用场景一般是路由跳转结束取消loading动画

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.afterEach((to,from)=>{
    NProgress.done()
})

第九章 路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。
• 标题名称

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录", icon: "round"
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页", icon: "eyes"
      }
    }
  ]
})

第十章 路由的滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    if (savePosition) {
      return savePosition
    } else {
      return {
        top: 0
      }
    }

  }
})

第十一章 动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。我们来看一个例子：

想象一下，只有一个路由的以下路由：

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

进入任何页面，/about，/store，或者 /3-tricks-to-improve-your-routing-code 最终都会呈现 Article 组件。如果我们在 /about 上添加一个新的路由：

router.addRoute({ path: '/about', component: About })

页面仍然会显示 Article 组件，我们需要手动调用 router.replace() 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）：

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

记住，如果你需要等待新的路由显示，可以使用 await router.replace()。

删除路由

有几个不同的方法来删除现有的路由：

• 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

• 通过调用 router.addRoute() 返回的回调：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

当路由没有名称时，这很有用。

• 通过使用 router.removeRoute() 按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

查看现有路由

Vue Router 提供了两个功能来查看现有的路由：

• router.hasRoute()：检查路由是否存在。
• router.getRoutes()：获取一个包含所有路由记录的数组。