vue3 之 vue-router 路由配置、导航守卫，路由跳转、路由参数传递及获取

最新推荐文章于 2024-07-24 14:47:53 发布
最新推荐文章于 2024-07-24 14:47:53 发布
阅读量4.5k 收藏 10
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42728767/article/details/125595642
版权

安装

// 使用 npm 安装
npm install vue-router

// 使用 yarn 安装
yarn add vue-router

// 可以在 vue-router 末尾添加 @4.x.x , 表示安装对应版本的依赖文件
// 举个🌰

yarn add vue-router@4 
// 或者 
npm install vue-router@4

在src目录下创建 Route > router.ts 文件，如下图所示：

在这里插入图片描述

router.ts 或者 router.js 文件中添加路由配置信息

// 使用 tree-shaking 按需引入
import {
    createRouter, // 创建路由
    createWebHashHistory, // 使用hash模式
    createWebHistory, // 使用浏览器history模式
    createMemoryHistory  // 用于服务器端渲染
} from "vue-router";

// 一次引入所有的组件（不推荐）
// import HelloWorld from '../components/HellowWorld.vue';
// import PageWatch from '../pages/page-watch'

// 使用路由懒加载，剩下的一些路由相关配置跟vue2基本差不多
const routes = [
    {
	    path: '/n', 
	    // path: '/n/:id', // 动态路由，可以在跳转目标页面用 useRouter 获取对应的参数 
		name: 'helloworld',
		// redirect: '/login' // 重定向自己的目标路由
		// alias: '/pp1', 配置路由别名
		meta: {
			title: '你好啊', // 可以在 main.js 中通过全局前置导航守卫 beforeEach 设置标签页名称
		},
	    component: () => import('@/components/HelloWorld.vue'),
	    beforeEnter: (to, from, next) => {
            console.log('路由独享守卫 to ：', to)
            console.log('路由独享守卫 from：', from)
            next()
       	},
       	children: []
    },
    {path: '/', component: () => import(/* webpackChunkName: "table" */ '@/pages/page-watch.vue')}  // 注释部分表示打包时chunk根据table进行分类打包
];
	
	
const router = createRouter({
    history: createWebHistory(),
    routes
});

// 通过全局前置守卫进行设置标签页名称
router.beforeEach((to, from, next) => {
    const {meta: {title}} = to;
    document.title = title || '自定义名称';
    console.log('全局前置守卫', to, from, next);
    next()
})

// 全局解析守
router.beforeResolve((to, from, next)=>{
  console.log('全局解析守卫', to, from, next)
  next()
})


// 全局后置守卫
router.afterEach((to, from, failure) => {
  console.log('全局后置守卫', to, from, failure)
  // next()
})

// 输出路由对象，可以在 main.js 中引入
export default router

在main.js 中引入并使用

import { createApp } from 'vue'

// 引入路由
import router from './Route/router.ts'

// 引入入库组件
import App from './App.vue'

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

在需要的位置放置 <router-view />

// 当前需求是在 app.vue 里面放置
<template>
  <router-view/>
</template>

到此一个基础路由配置就算是完成了，后面可以根据自己的业务需求进行配置。如下图所示：

在这里插入图片描述
在这里插入图片描述

跳转方式

  1. <router-link>

    <!-- 通过router-link实现跳转 -->
<router-link to="/">跳转1</router-link>

<router-link :to="'/'">跳转2</router-link>

<router-link :to="{path: '/'}">跳转3</router-link>

<router-link :to="{path: '/', query: {query: '123'}}">跳转4</router-link>

<router-link :to="{name: 'pageWatch', params: {params: '123'}}">跳转5</router-link>

  2. 函数式 useRouter跳转并实现参数传递及接收 useRoute

    
// ---------------- 组件A ----------------------

// 按需引入 vue-router
import {useRouter} from 'vue-router'

// 路由实例化
const router = useRouter();
const goToPage = () => {

   // 方式1：
   // router.push('/')

   // 方式2，可以携带参数
   router.push({
       path: '/',
       query: {
           bb:'111'
       }
   })
   // ...（具体使用方法就跟 Vue2 基本没差别）
}



// ---------------- 组件B ----------------------

// 接收路由传递的参数
import {useRoute} from 'vue-router'

const Route = useRoute();
console.log('接收路由参数(Route.query)::',Route.query)
console.log('接收路由参数(Route.params)::',Route.params)
// {bb: '111'}

在这里插入图片描述

组件路由守卫2.x

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

组件路由守卫3.x

// 实现方式一
<script>
	import {ref, reactive} from 'vue'

    export default ({
        name: 'pageWatch',
        data(){
            return {
			
            }
        },
        setup(){
        	// Do somethings
        	
			const msg = ref('这是通过ref定义的一个基本类型的数据')
			const myCarObj = reactive({
				carName: 'aaa',
				price: '20',
				color: 'white'
			})
			
            // 此处需要return 回去一个对象
            return {
            	msg,
            	myCarObj 
            }
        },
        beforeRouteEnter(to, from, next) {
            console.log('组件内前置导航守卫 beforeRouteEnter ：', this,to, from);
            // 在渲染该组件的对应路由被验证前调用
            // 不能获取组件实例 `this` ！
            // 因为当守卫执行时，组件实例还没被创建！
            console.log(next)
            next((vm)=>{console.log('组件内前置导航守卫通过回调访问this',vm)})
        },
        beforeRouteUpdate(to, from, next) {
            console.log('组件内更新导航守卫 beforeRouteUpdate ：', this,to, from);
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
            // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
            next()
        },
        beforeRouteLeave(to, from, next) {
            console.log('组件内后置导航守卫 beforeRouteLeave ：', this,to, from);
            // 在导航离开渲染该组件的对应路由时调用
            // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
            next()
        }
    })
</script>

// 实现方式二

// 特别说明： 3.x 里面要使用 beforeRouteEnter 需要采取如下方式

// 单独启用一个 script 里面进行 组件内导航监听
<script>
    import { defineComponent } from 'vue'

    export default defineComponent({
        beforeRouteEnter(to, from, next) {
            console.log('组件内前置导航守卫 beforeRouteEnter ：', this,to, from);
            // Do somethings
            next()
        }
    })
</script>

<script setup>
	// Do somethings
</script>

路由解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

查看解析 🌰

在这里插入图片描述

求助信息

onBeforeRouteLeave, onBeforeRouteUpdate这两个API在 setup函数中，并未实现组件内路由监听，希望各位朋友能够指点一二。

场景一

import {onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router'

<script setup>
// 此方式并未在控制台中输出打印信息
onBeforeRouteLeave((to,from) => {
	console.log(111,to,from)
})

onBeforeRouteUpdate((to,from) => {
	console.log(222,to,from)
})
	

</script>

场景二

import {onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router'
export default {
    setup() {
        // 与 beforeRouteLeave 相同，无法访问 `this`
        onBeforeRouteLeave((to, from) => {
            console.log(1111111,to,from)
        })

        // 与 beforeRouteUpdate 相同，无法访问 `this`
        onBeforeRouteUpdate(async (to, from) => {
            console.log(22222222,to,from)
        })
    },
}

在这里插入图片描述

赵花花5070
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uni-simple-router实现简单的路由守卫
04-21
uni-simple-router是专为uni-app设计的一个轻量级路由管理插件，它提供了一些强大的特性，包括路由守卫，使我们能够更好地控制应用程序的导航流程。 首先，我们需要了解路由守卫的基本概念。在Web开发中，路由守卫...
vue-router 实现导航守卫（路由卫士）的实例代码
12-04
Vue Router 是 Vue.js 应用中的官方路由管理库，它提供了强大的导航控制功能，其中的导航守卫（Navigation Guards）是实现路由保护的一种机制。这些守卫允许你在路由发生改变时执行逻辑，如验证用户权限、加载数据等...
VUE3获取当前路由参数
qq_38407055的博客
04-16 741
console.log(“获取当前路由”,router.query )
Vue3实战笔记（22）—路由Vue-Router 实战指南（路由传参）
山花的博客
05-15 1004
vue-router 是 Vue.js 官方路由管理器。它和 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得易如反掌。前面提到过简单的使用路由，直到上文使用404界面发现了个问题，和路由相关，觉得需要掌握的还很多，打算花点时间好好深入的学习一下，路由出山后我觉得问题就能迎刃而解了。路由传参是 vue-router 的核心功能之一，掌握它对于开发复杂的单页应用至关重要。在实际应用中，根据不同的场景选择合适的传参方式，可以使代码更加清晰和易于维护。
Vue3路由跳转并传递参数
聂可以的博客
06-06 3967
Vue3路由跳转并传递参数
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5647
Vue-Router路由，编程式导航，动态路由，路由导航守卫
【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧
工作的日常记录和平凡的生活分享
07-03 1472
路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。 - 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时，将渲染 `User` 组件，其中 `:id` 是一个动态参数。 - 组件映
26_Vue3路由-VueRouter之动态添加路由和导航守卫的使用
酒客的博客
02-27 3948
Vue3路由-VueRouter之动态添加路由和导航守卫的使用 router-link的v-slot 在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素： 但是在vue-router4.x开始，该属性被移除了； 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容； v-slot如何使用呢？ 首先，我们需要使用custom表示我们整个元素要自定义 如果不写，那么自定义的内容会被包裹在一个 a 元素中； 其次，我们使
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue2进阶篇：vue-router之路由的query参数
刘大猫
07-08 9960
vue2进阶篇：vue-router之路由的query参数
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 1587
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
Vue Router系列之详解路由守卫
老__L的博客
02-24 7482
详解路由守卫
vue-router路由参数刷新消失的问题解决方法
08-30
vue-router路由参数刷新消失的问题解决方法 路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和...
vue-router路由与页面间导航实例解析
11-30
此外，还可以使用`this.$router.push()`或`this.$router.go()`方法在组件内部触发路由跳转。 路由元信息（meta）、命名视图、嵌套路由、动态路由匹配、重定向和别名等特性，都是vue-router增强路由功能的重要组成...
vue-router二级导航切换路由及高亮显示的实现方法
12-09
Vue Router 是 Vue.js 的官方路由管理器，它让我们能够实现前端路由，使应用程序可以在不同的视图之间导航，而无需刷新整个页面。在这个示例中，我们将看到如何在 Vue 应用中实现二级导航的路由切换以及高亮显示。 ...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 683
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue3使用el-input-number，只能是整数，并且没有四舍五入
qq_46131497的博客
07-24 461
【代码】vue3使用el-input-number，只能是整数，并且没有四舍五入。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
最新发布
L_C_sunny的博客
07-24 297
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 vue-router 路由跳转
09-02
在 Vue 3 中，你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它： ``` npm install vue-router@next ``` 2. 在你的主文件（例如 `main.js` 或 `main.ts`）中导入 Vue Router 和你的路由配置： ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import Home from './views/Home.vue'; import About from './views/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes }); const app = createApp(App); app.use(router); app.mount('#app'); ``` 在上面的示例中，我们创建了两个路由：`/` 对应 `Home` 组件，`/about` 对应 `About` 组件。你可以根据自己的需求添加更多的路由。 3. 在你的组件中使用路由跳转，你可以使用 `<router-link>` 组件或 `$router.push` 方法。 使用 `<router-link>` 组件： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 使用 `$router.push` 方法： ```javascript // 在方法中调用 methods: { goToHome() { this.$router.push('/'); }, goToAbout() { this.$router.push('/about'); } } // 或者在模板中调用 <button @click="$router.push('/')">Go to Home</button> <button @click="$router.push('/about')">Go to About</button> ``` 这样，当用户点击链接或按钮时，路由就会进行跳转。 这只是一个基本的示例，你还可以使用更多的 Vue Router 功能，如路由参数、嵌套路由、路由守卫等。你可以参考 Vue Router 的官方文档来了解更多信息。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值