👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人 

Vue路由概念

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

单页面应用也称为SPA(Single Page Application)，它主要是网页的界面渲染在一个静态的页面上，当用户要从当前界面跳到另一个界面的时候，在这个过程中，不需要重新加载整个页面，所以页面之间的切换十分快速

多页面在进行页面切换时十分缓慢，在路由进行跳转的时候会加载所有的资源，而且页面重复代码多

对比之下，单页面原理是JavaScript动态修改内容而已，资源只需要局部的刷新，因此SPA具有极高的流畅度，有利于提升用户体验 

单页面VS多页面 

路由作用 

页面与页面之前的切换，是通过不同的地址访问的，地址对应着要显示的组件。而实现这个页面切换显示的功能就是路由的作用

项目引入路由 

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做 的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲 染它们 

安装路由 

npm install vue-router@4 --save

实现路由功能

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter,createWebHashHistory } from "vue-router"
import Home from "./pages/Home.vue"
import About from "./pages/About.vue"
const routes = [
   {
        path:"/",
        component:Home
   },
   {
        path:"/about",
        component:About
   }
]
const router = createRouter({
    // 路由地址访问方式 # /
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式
    history: createWebHashHistory(),
    routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')

<template>
    <h3>Home首页</h3>
</template>

<template>
    <h3>About关于页面</h3>
</template>

<template>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
</template>

router-view

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

router-link 

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

实时效果反馈

1.在Vue路由中，实现页面跳转下列是哪一个：

A router

B router-view

C router-link

D createRouter 

集成Vue路由 

如果文件全部放在主入口文件中是不合理的，所以我们需要提取成 为独立的路由文件新项目可以直接选择集成路由在其中 

import { createRouter,createWebHashHistory } from "vue-router"
import Home from "../pages/Home.vue"
import About from "../pages/About.vue"
const routes = [
   {
        path:"/",
        component:Home
   },
   {
        path:"/about",
        component:About
   }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App)
app.use(router)
app.mount('#app')

编程式导航

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

在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push  

选项式API 

<template>
    <h3>Home首页</h3>
    <button @click="clickHandler">跳转到About页面</button>
</template>
<script>
 export default {
    methods:{
        clickHandler(){
            this.$router.push("/about")
       }
   }
}
</script>

组合式API

<template>
    <h3>About关于页面</h3>
    <button @click="clickHandler">跳转到首页</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function clickHandler(){
    router.push("/")
}
</script>

实时效果反馈

1.在Vue路由中，下列那个可以实现编程式导航跳转：

A this.$router.push()

B this.push()

C push()

D $router.push()

带参数的动态路由匹配 

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

// router/index.js
const routes = [
   {
        path:"/",
        component:Home
   }
    ...
   {
        path:"/details/:name",
        component:Details
   }
]

<template>
    <h3>列表</h3>
    <ul>
        <li v-for="(item,index) in user.names" :key="index">
            <router-link :to="'/details/' + item">{{ item }}</router-link>
        </li>
    </ul>
</template>
<script setup>
  import { reactive } from "vue"
  const user = reactive({
     names:["iwen","ime","frank"]
})
</script>

选项式API

<template>
    <h3>详情</h3>
    <p>{{ name }}</p>
</template>
<script>
  export default {
    data(){
        return{
            name:""
       }
   },
    mounted(){
        this.name = this.$route.params.name
   }
}
</script>

组合式API

<template>
    <h3>详情</h3>
    <p>{{ name }}</p>
</template>
<script setup>
  import { useRoute } from "vue-router"
  import { ref } from "vue"
  const route = useRoute()
  const name = ref("")
  name.value = route.params.name;
</script>

可选参数

{
    path:"/details/:name?",
    component:Details
}

实时效果反馈

1.在Vue路由中，可以获取页面跳转传递的参数是：

A router

B params

C this.params

D this.$route.params

嵌套路由 

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

<template>
    <h3>新闻</h3>
    <router-link to="/news/sport">Sport</router-link> |
    <router-link to="/news/yule">Yule</router-link>
    <router-view></router-view>
</template>

<template>
    <h3>体育新闻</h3>
</template>

<template>
    <h3>娱乐新闻</h3>
</template>

{
    path:"/news",
        component:News,
            children:[
               {
                    path:"sport",
                    component:SportNews
               },
               {
                    path:"yule",
                    component:YuleNews
               }
           ]
}

重定向和别名

重定向 

重定向也是通过 routes 配置来完成

{
    path:"/news",
        component:News,
            redirect:"/news/sport",
                children:[
                   {
                      path:"sport", component:SportNews
                   },
                   {
                        path:"yule", component:YuleNews
                   }
               ]
}

别名

重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 / 。那么什么是别名呢

{
    alias:"yl",
    path:"yule",
    component:YuleNews
}

 命名路由

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

{
    name:"About",
    path:"/about",
    component:About
}

this.$router.push({
 name:"About"
})

<router-link :to="{ name:'Details',params:{ name:item } }">{{ item }}</router-link>

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一 个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图， 而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默 认为 default 

const routes = [
   {
       name:"Home",
       path:"/",
       components:{
           default:Home,
           // 它们与 `<router-view>` 上的 `name` 属性匹配
           AD
       }
   },
   {
       name:"About",
       path:"/about",
       components:{
           default:About,
           AD
       }
   }
]

<template>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
    <router-view name="AD"></router-view>
</template>

不同的历史模式

在创建路由器实例时， history 配置允许我们在不同的历史模式中进行选择 

Hash 模式 

hash 模式是用 createWebHashHistory() 创建的

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

HTML5 模式

用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式

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

当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id 。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id ，就会得到一个 404 错误。这就丑了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加 一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与 你的应用程序中的 index.html 相同的页面。漂亮依旧!

具体参考地址：

https://router.vuejs.org/zh/guide/essentials/history-mode.h tml#html5-%E6%A8%A1%E5%BC%8F 

导航守卫 

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的 

全局前置守卫 

你可以使用 router.beforeEach 注册一个全局前置守卫,当一个导航触发时，就会触发全局前置守卫

router.beforeEach((to, from, next) => {
    // 返回 false 以取消导航
    next()
})

 全局解析守卫

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似

router.beforeResolve((to,from,next) => {
    next()
})

 全局后置钩子

你可以直接在路由配置上定义 beforeEnter 守卫,在导航结束之后触发

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

 路由独享的守卫

你可以直接在路由配置上定义 beforeEnter 守卫, beforeEnter 守卫 只在进入路由时触发

{
    name: "List",
    path: "/list",
    component: List,
        beforeEnter:(to,from) => {
            return true;
   }
}

 组件内的守卫

你可以在路由组件内直接定义路由导航守卫

<template>
    <h3>Home首页</h3>
</template>
<script>
  export default {
    beforeRouteEnter(to, from){
        // 在渲染该组件的对应路由被验证前调用
        // 不能获取组件实例 `this` ！
        // 因为当守卫执行时，组件实例还没被创建！
        console.log(to,from)
        beforeRouteUpdate(to,from){
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 
        `/users/:id`，在 `/users/1` 和 `/users/2` 之间
        跳转的时候，
        // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
   },
    beforeRouteLeave(to,from){
        // 在导航离开渲染该组件的对应路由时调用
        // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
   }
}
</script>

 完整的导航解析流程