vue 的路由（Vue3【Vue路由概念、项目引入路由、集成Vue路由 、编程式导航、带参数的动态路由匹配 、嵌套路由、重定向和别名、命名视图、不同的历史模式​】(十)-全面详解（学习总结—从入门到深化））

👏作者简介：大家好   
    
    
  ，我是小童


     


     


     
，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>

 完整的导航解析流程