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

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

推荐整理分享Vue3【Vue路由概念、项目引入路由、集成Vue路由 、编程式导航、带参数的动态路由匹配 、嵌套路由、重定向和别名、命名视图、不同的历史模式​】(十)-全面详解（学习总结---从入门到深化）(vue路由的理解)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由详解,vue3的路由,vue3.0路由,vue路由两种方式,vue3.0路由,vue路由详解,vue路由详解,vue3的路由,内容如对您有帮助，希望把文章链接给更多的朋友！

👏作者简介：大家好，我是小童，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 routerimport { 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.jsconst 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>

 完整的导航解析流程