（11）Vue-Router路由的详细使用

于 2025-05-03 00:00:00 发布
阅读量745 收藏 15
点赞数 18
分类专栏： # 【Vue3全栈开发系列】 文章标签： vue.js vue路由 vue3核心语法 vue3学习笔记 嵌套路由 Vue-Router Vue导航守卫
緑水長流原创出品，未经许可禁止转载！
本文链接：https://blog.csdn.net/Bb15070047748/article/details/147659410
版权

本系列教程目录：Vue3+Element Plus全套学习笔记-目录大纲

文章目录

第2章 路由 Vue-Router

传统的页面应用，是用一些超链接来实现页面切换和跳转的。Vue创建的项目是单页面应用，如果想要在项目中模拟出来类似于页面跳转的效果，就要使用路由。在vue-router单页面应用中，切换页面是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

2.1 Vue路由快速入门

2.1.1 创建项目

首先创建一个Vite工程：

npm create vite

进入Vtie工程，安装vite依赖：

npm install

安装vue-router组件：

npm install vue-router

2.1.2 路由运行流程

在src/components下定义index.vue、demo01.vue、demo02.vue，在src目录下新建router目录（该目录名任意），在该目录下新建一个index.js，下面是路由的具体配置信息：

// 导入VueRouter中的createRouter和createWebHashHistory函数
import {createRouter, createWebHashHistory} from 'vue-router'
// 导入index组件
import index from '../components/index.vue'

// 定义路由表
const routes = [
    // path: 组件访问的路径,component: 对应的组件
    {path: '/index', component: index},
    // 快捷写法
    {path: '/demo01', component: () => import('../components/demo01.vue')},
    {path: '/demo02', component: () => import('../components/demo02.vue')}
]

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

// 导出路由
export default router

在main.js中修改Vue实例，将路由注册到Vue实例中让其生效：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 导入路由
import router from "./router/index.js";

// 创建Vue实例
let app = createApp(App);

// 注册路由
app.use(router)

// 挂载容器
app.mount('#app')

App.vue：

<template>
  <div>
    <h1>Welcome to App</h1>

    <!--  配置路由跳转  -->
    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link to="/demo01">Go to demo01</router-link>

    <br>
    <router-link to="/demo02">Go to demo02</router-link>

    <hr>
    <!--  路由视图占位符  -->
    <router-view />
  </div>

</template>

效果如下：

2.2 传递参数-useRoute

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

2.2.1 路径参数-params

路径参数是params传参的一种方式，类似于SpringMVC中的@PathVariable注解，即将参数传递的参数放在路径的一部分。

1）普通传参

定义一个article组件：

<script setup>
// 导入useRoute对象
import {useRoute} from "vue-router";

// 获取route对象
let route = useRoute();

console.log('route对象:', route);
</script>

<template>
  <div>
    <!--  通过全局$route对象获取参数  -->
    <h3>通过全局$route对象获取params对象:</h3>

    <h4> {{ $route.params }}</h4>

    <hr>
    <!--  通过route对象获取参数  -->
    <h3>通过全局route对象获取params对象: </h3>

    <h4> {{ route.params }}</h4>

  </div>

</template>

定义路由：

{path: '/article/:id', component: () => import('../components/test01/article.vue')}

在App.vue添加链接路径：

<template>
  <div>
    <h2>Welcome to App</h2>

    <!--  配置路由跳转  -->
    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link to="/article/100">Go to article-100</router-link>

    <br>
    <router-link to="/article/200">Go to article-200</router-link>

    <hr>
    <!--  路由视图占位符  -->
    <router-view />
  </div>

</template>

效果如下：

2）传递多个参数

使用路径传参想要传递多个参数只要在路径上写上多个参数即可。

定义路由：

{path: '/user/:id/:name/:age', component: () => import('../components/test01/user.vue')},

在App.vue添加链接路径：

<template>
  <div>
    <h2>Welcome to App</h2>

    <!--  配置路由跳转  -->

    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link to="/user/100/小灰/20">Go to user-小灰</router-link>

    <br>
    <router-link to="/user/200/小蓝/25">Go to user-小蓝</router-link>

    <hr>
    <!--  路由视图占位符  -->
    <router-view />
  </div>

</template>

效果如下：

3）对象方式传参

对象传参允许我们在link标签处传递类似于JSON对象形式的参数。

Tips：在使用对象方式传参时是借助组件的名称进行跳转，因此在定义路由时一定要为组件命名。

定义路由：

// 对象传参一定要有name属性
{
    name: "goods", 
    path: '/goods/:id/:name/:price/:desc', 
    component: () => import('../components/test01/goods.vue')
},

在App.vue添加链接路径：

<template>
  <div>
    <h2>Welcome to App</h2>

    <!--  配置路由跳转  -->
    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link :to="{
      name: 'goods',
      params: {
        id: 100,
        name: '小米10至尊纪念版',
        price: 5899.00,
        desc:'性能超级强悍'
      }
    }">Go to goods-手机
    </router-link>

    <br>
    <router-link :to="{
      name: 'goods',
      params: {
        id: 200,
        name: '机械革命无界15 X Pro暴风雪',
        price: 48990.00,
        desc:'性能强悍，性价比高'
      }
    }">Go to goods-笔记本
    </router-link>

    <hr>
    <!--  路由视图占位符  -->
    <router-view/>
  </div>

</template>

效果如下：

2.2.2 查询参数-query

query传参方式会把参数以问号拼接到路由上面；类似于我们直接在URL地址栏上输入的参数。

1）普通传参

定义组件：

<script setup>
// 导入useRoute对象
import {useRoute} from "vue-router";

// 获取route对象
let route = useRoute();

</script>

<template>
  <div>
    <!--  通过全局$route对象获取参数  -->
    <h3>通过全局$route对象获取params对象:</h3>

    <!-- 注意:此时是通过query对象获取参数, 而非params对象    -->
    <h4> {{ $route.query }}</h4>

    <hr>
    <!--  通过route对象获取参数  -->
    <h3>通过全局route对象获取params对象: </h3>

    <!-- 注意:此时是通过query对象获取参数, 而非params对象    -->
    <h4> {{ route.query }}</h4>

  </div>

</template>

定义路由：

{name: 'dept',path: '/dept', component: () => import('../components/test01/dept.vue')},

在App.vue添加链接路径：

<template>
  <div>
    <h2>Welcome to App</h2>

    <!--  配置路由跳转  -->
    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link to="/dept?id=100&name=研发部">Go to article-研发部</router-link>

    <br>
    <router-link to="/dept?id=200&name=市场部">Go to article-市场部</router-link>

    <!--  路由视图占位符  -->
    <router-view/>
  </div>

</template>

效果如下：

2）对象方式传参

同样的，使用query方式传参也支持对象方式传递参数。

在App.vue添加链接路径：

<template>
  <div>
    <h2>Welcome to App</h2>

    <router-link to="/index">Go to index</router-link>

    <br>
    <router-link :to="{
      // name和path都可以传递参数
      name: 'dept',
      query: {
        id: 100,
        name: '研发部'
      }
    }">Go to article-研发部</router-link>

    <br>
    <router-link :to="{
      // name和path都可以传递参数
      // name: 'dept',
      path: '/dept',
      query: {
        id: 200,
        name: '市场部'
      }
    }">Go to article-市场部</router-link>

    <!--  路由视图占位符  -->
    <router-view/>
  </div>

</template>

2.3 嵌套路由

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

/user/profile                   		/user/posts 
┌──────────────────┐                  ┌──────────────────┐
│ User             │                  │ User             │
│ ┌──────────────┐ │                  │ ┌──────────────┐ │
│ │ Profile      │ │  ●────────────▶  │ │ Posts        │ │
│ │              │ │                  │ │              │ │
│ └──────────────┘ │                  │ └──────────────┘ │
└──────────────────┘                  └──────────────────┘

在嵌套路由中，一级路由下面还有路由，例如一级路由为user，但是在user下面还有profile、posts等子路由等。

App.vue：

<template>
  <div>
    <h2>Welcome to App</h2>

    <!--  配置路由跳转  -->
    <router-link to="/">Go to index</router-link>

    <br>
    <router-link to="/user">Go to user</router-link>

    <hr>
    <!--  路由视图占位符  -->
    <router-view />
  </div>

</template>

user.vue：

<template>
  <div>
    <h3>This is user</h3>

    <router-link to="/user/profile">profile</router-link>

    <br>
    <router-link to="/user/posts">posts</router-link>

    <hr>
    <router-view></router-view>

  </div>

</template>

定义路由表：

// 定义路由表
const routes = [
    ...
    {
        path: '/user', component: () => import('../views/user.vue'),
        children: [
            // 这里一定要写相对路径
            {path: 'profile', component: () => import('../views/user/profile.vue')},
            {path: 'posts', component: () => import('../views/user/posts.vue')}
        ]
    }
    ...
]

效果如下：

2.4 路由跳转-useRouter

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，我们可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

另外，我们可以使用vue-router中的useRouter对象来进行编程式路由，即通过代码的方式我们也可以进行路由的跳转。

路由表如下：

// 定义路由表
const routes = [
    {path: '/index', component: index},
    {name: 'dept', path: '/dept', 
        component: () => import('../components/test01/dept.vue')
    },
    {path: '/user/:id/:name/:age', 
        component: () => import('../components/test01/user.vue')
    },
    // 对象传参一定要有name属性
    {name: "goods", path: '/goods/:id/:name/:price/:desc', 
        component: () => import('../components/test01/goods.vue')
    },
    {path: '/article/:id', 
        component: () => import('../components/test01/article.vue')
    }
]

App.vue：

<template>
  <div>
    <h2>Welcome to App</h2>

    <router-link to="/index">Go to index</router-link>

    <br>
    <button @click="toArticle">路径传参-单个参数-article</button>

    <button @click="toUser">路径传参-多个参数-user</button>

    <button @click="toGoods">路径传参-对象传参-goods</button>

    <button @click="toDept_01">查询参数-普通传参-dept</button>

    <button @click="toDept_02">查询参数-对象传参-dept</button>

    <!--  路由视图占位符  -->
    <router-view/>
  </div>

</template>

<script setup>
// 导入useRouter
import { useRouter } from 'vue-router'
// 创建路由实例
let router = useRouter();

function toArticle(){
  router.push("/article/100");
}

function toUser(){
  router.push("/user/100/小灰/20");
}

function toGoods(){
  router.push({
    name: 'goods',
    params: {
      id: 100,
      name: '小米10至尊纪念版',
      price: 5899.00,
      desc:'性能超级强悍'
    }
  });
}

function toDept_01(){
  router.push("/dept?id=100&name=研发部");
}

function toDept_02(){
  router.push({
    name: 'dept',
    query: {
      id: 200,
      name: '市场部'
    }
  });
}
</script>

使用Router也可以进行回退，例如我们在某个子组件中添加如下代码：

<script setup>
// 导入useRouter对象
import {useRouter} from "vue-router";

// 获取router对象
let router = useRouter();
function goBack() {
  // go代表前进，back代表后退

  // go传递-1代表后退一页,back传递-1代表前进一页
  router.go(-1);
  // router.back();
}
</script>

<template>
  <div>
    <h3>article page</h3>

    <button @click="goBack">back</button>

  </div>

</template>

2.5 Vue导航守卫

导航守卫允许在路由发生前、发生时、发生后执行自定义函数以完成某些特定功能，类似于拦截器的功能。导航守卫主要用于权限控制、数据预加载、页面访问限制等场景。

路由函数一般存在以下三个参数：

  • to：即将要进入的目标路由对象；
  • from：即将要离开的路由对象；
  • next：涉及到next参数的路由函数，必须调用next()方法来继续路由，否则路由会中断在这，不会继续往下执行。
next('/login');					# 跳转到/login请求
next({name:'login'});			# 跳转到login组件
next({path:'/login'});			# 跳转到/login请求

- next()：进行管道中的下一个函数。如果全部函数执行完了，则导航的状态就是confirmed(确认的)。
- next( false )：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。
- next('/')：当前的导航被中断，跳转到一个新的地址。next方法中可以传递组件名称或要跳转的页面路径，例如：

2.5.1 全局守卫

全局守卫是指路由实例上直接操作的函数，特点是所有路由配置的组件都会触发，即触发路由就会触发这些函数。

  • beforeEach（to，from， next）：在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知。
  • beforeResolve（to，from， next）： 这个和beforeEach类似，也是路由跳转前触发，区别是该方法在导航被路由前但组件已经被解析后调用（所有组件内守卫和异步路由组件被解析之后）。即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
  • afterEach（to，from） ： 和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。这些钩子不会接受next函数也不会改变导航本身。

在index.js中定义全局守卫：

// 定义全局前置导航守卫
router.beforeEach((to, from,next) => {
    console.log("守卫to：", to)
    console.log("守卫from：", from)

    // 如果访问的是dept请求则判断是否已经登录
    if(to.path === '/dept'){
        let isLogin = false; //假设登录成功
        if(isLogin){
            next(); //继续路由(相当于放行dept请求)
        }else{
            router.push('/login'); //没有登录则跳转到登录页面
        }
    }
    
    // 如果访问的不是dept请求则继续路由
    next();
})

在进行路由跳转将会执行该函数，输出如下：

2.5.2 路由守卫

路由守卫是指在单个路由配置的时候也可以设置的函数

  • beforeEnter（to，from， next）：和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫。

例如给index路由添加路由守卫，这样每次在访问index组件时都会经过该路由守卫：

{
    path: '/index', component: index, beforeEnter: (to, from, next) => {
        console.log("beforeEnter-守卫to：", to)
        console.log("beforeEnter-守卫from：", from)
        next();
    }
}

2.5.3 组件内守卫

组件内守卫是指在组件内执行的函数，类似于组件内的生命周期，相当于为配置路由的组件添加的路由函数。

  • beforeRouteEnter（to，from， next）：进入组件前
  • beforeRouteUpdadte（to，from， next）：路由改变但组件复用时
  • beforeRouteLeave（to，from， next）：离开组件前

例如在index.vue页面中添加组件内守卫：

<script setup>

function beforeRouteEnter(to, from, next) {
  console.log("beforeRouteEnter-守卫to：", to)
  console.log("beforeRouteEnter-守卫from：", from)
  next();
}

</script>

<template>
    <div>
        <h3>This is index</h3>

    </div>

</template>

<style scoped>
</style>
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
【vue-router】Vue-router如何实现路由懒加载
景天科技苑
11-29 6万+
在现代前端开发中，Vue.js凭借其轻量级和易用性，成为了很多开发者的首选框架。然而，在构建大型单页应用（SPA）时，初始加载时间可能会变得非常长，影响用户体验。为了解决这个问题，Vue.js引入了路由懒加载机制。本文将结合实际案例，详细讲解Vue-Router路由懒加载的用法。
【vue-router】关于Vue-Router路由守卫
景天科技苑
12-03 5万+
路由守卫是Vue-Router提供的一种机制，用于在路由跳转前或跳转后执行一些操作。它类似于Vue组件中的生命周期钩子函数，但它是针对路由的。通过路由守卫，我们可以在用户访问特定路由前或离开特定路由后执行一些逻辑，从而控制用户访问权限、加载数据或取消导航等操作。
【vue-router】vue-router如何实现动态路由
热门推荐
景天科技苑
11-28 6万+
在构建基于Vue.js的单页面应用（SPA）时，Vue Router是一个不可或缺的工具。它提供了声明式的路由功能，使开发者能够轻松地管理和控制应用内的导航逻辑。动态路由是Vue Router中的一项重要特性，它允许我们根据运行时的数据来动态地匹配路由。这对于需要根据用户输入或后端响应来调整应用行为的场景尤其有用。本文将详细介绍动态路由的概念、作用及其在Vue Router中的具体实现，并通过一系列实际案例来展示如何有效地使用这项功能。
vue-router 路由超详细教程
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 4920
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
vue-router路由懒加载
longgege001的博客
10-11 1万+
vue-router路由懒加载实践，vue-router路由实现原理简单说明
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
vue-router的详细安装及配置
m0_64520392的博客
12-20 2734
vue-router的详细安装及配置，router
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 4313
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
基于vue-router 多级路由redirect 重定向的问题
10-18
本文将详细介绍在使用 vue-router 实现多级路由的重定向时可能会遇到的问题以及解决方案。 首先，让我们了解一些基础知识。在 vue-router 中，重定向是将指定路由映射到另一个路径的过程。重定向可以是动态的，也...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
watch 数组 Vue 3
最新发布
qq_30049249的博客
05-01 256
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
基于Springboot + vue实现的列书单读书平台
如果回复的的不及时，请见谅。回复不及时请耐心等待。
04-29 406
书单信息管理：管理书单信息，包括新增、查看、修改、删除和查看评论。用户管理：管理系统中所有用户的信息，包括添加、删除和修改用户。后台管理：管理系统配置，包括轮播图和网站介绍的管理。书单信息管理：用户可以新增和查看书单信息。在线书店管理：用户可以查看在线书店信息。本系统包含管理员和用户两个角色。
JavaWeb：vue&axios
IT瘾君子的博客
04-28 430
JavaWeb、vue、axios、Ajax
Vue 中局部指令（directives）的用法详解
jingling555的博客
04-28 414
局部指令适合封装特定组件的功能，而全局指令则更适合应用于整个应用的通用功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

緑水長流*z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值