懂个锤子Vue VueRouter路由深入浅出

已于 2024-08-23 08:05:28 修改
阅读量791 收藏 20
点赞数 29
分类专栏： 前端 文章标签： vue.js 前端 javascript VueRouter 工程化 前端框架
于 2024-08-05 11:00:00 首次发布
WSM
本文链接：https://blog.csdn.net/qq_45542380/article/details/140912703
版权

VueRouter路由深入浅出

VueRouter 介绍：

Vue Router 是 Vue.js官方的路由管理器：

极大地简化了在 单页面应用程序 SPA-Single Page Application： 中构建导航和页面切换的复杂性；

单页面应用程序 SPA

单页面应用程序SPA，Single Page Application：

在用户首次访问时加载整个应用程序或核心资源，之后页面切换通过JavaScript动态更新内容，而不需要重新加载整个页面；

用户体验： 提供流畅的导航体验，页面切换快，类似于原生应用，因为内容通常是异步加载的；

技术实现： 依赖前端路由技术，如Vue Router、React Router等，来管理页面视图的切换；

前后端分离： 前端负责渲染和交互，后端专注于数据处理和API服务；

多页面应用程序 MPA

多页面应用程序MPA，Multi Page Application：

每个功能或内容块对应一个独立的HTML页面，用户导航到新页面时，

浏览器会发起新的HTTP请求，加载完整的HTML文档及相关的CSS、JavaScript等资源；

用户体验： 页面切换涉及完整的页面刷新，可能会感觉较慢，因为：每个页面都是独立加载的；

SEO友好： 因为每个页面都是独立的HTML文件，搜索引擎更容易抓取和索引内容

开发方式： 前端和后端的界限不那么明显，通常后端会直接参与视图的渲染；

总结：

单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点，如：网易云音乐 https://music.163.com/

多页应用类网站：公司官网 / 电商类网站，如：京东 https://jd.com/

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

Vue中的路由：

Vue中的路由，即前端路由技术，它处理的是用户在：单页面应用程序SPA中的导航；

Vue Router允许开发者定义不同的URL路径，并将这些路径与特定的Vue组件关联起来：

当用户导航到一个新的URL时，不是加载整个新页面，而是动态地替换当前视图中的内容，展示与新URL相关联的组件；

Vue路由的基本使用：

安装与初始化：

通过NPM或CDN获取：Vue Router，vue2.0对应的路由版本：VueRouter3.x

#下载 VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5				#yarn安装
npm install vue-router@3.6.5 --save		#npm安装

注意：根据Vue版本匹配路由版本： Vue2—VueRouter3.x-Vuex3.x 、Vue3-VueRouter4.x-Vuex4.x

创建对应路由组件

本案例以：网易云网站，举例： 在src/views/定义路由组件.vue 文件 为了规范代码通常在：

  • src/views文件夹定义：页面组件 - 页面展示 - 配合路由用；
  • src/components文件夹定义：复用组件 - 展示数据 - 常用于复用；

自定义路由页面组件： 这里就不帖代码了；

  • src/views/FindMusic.vue 发现音乐，路由模块;
  • src/views/MyFriend.vue 我的朋友，路由模块;
  • src/views/MyMusic.vue 我的音乐，路由模块;

主应用引入\配置路由

main.js： 文件中引入并使用刚创建的路由器实例；

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

//1.下载 v3.6.5 yarn add vue-router@3.6.5
//2.引入vue-router npm包
import VueRouter from 'vue-router';
// 引入自定义组件页面 views目录) 配规则;
import FindMusic from './views/FindMusic';
import MyFriend from './views/MyFriend';
import MyMusic from './views/MyMusic';
//3.安装注册VueRouter插件初始化
Vue.use(VueRouter);
//4.创建路由对象,定义路由规则
const router = new VueRouter({
  //route: 一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/findMusic', component: FindMusic },
    { path: '/myFriend', component: MyFriend },
    { path: '/myMusic', component: MyMusic },
  ]
})
//5.注入到new Vue中,建立关联
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

在模板中使用路由

App.vue： 模板目录中通过：<router-view></router-view> 标签来渲染匹配的组件；

  • 运行Demo： http://localhost:8080/#/，#/ 表示项目的路由已经被Vue-Router管理了；
<template>
  <div>
    <div class="footer_wrap">
      <a href="#/findMusic">发现音乐</a>
      <a href="#/myFriend">我的朋友</a>
      <a href="#/myMusic">我的音乐</a>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {};
</script>
<style><!-- 省略样式代码 --></style>

在这里插入图片描述

路由的封装抽离：

路由的封装抽离是Vue.js项目开发中的一个最佳实践：

它涉及到将路由配置和管理从应用的主入口文件通常是：main.js中分离出来，以提高代码的可维护性和可读性；

1. 创建路由器模块： 在项目的src目录下创建一个router文件夹、文件夹内创建一个index.js文件，这是路由器的配置中心；

2.导入Vue和Vue Router： 在src/router/index.js 中，首先需要：导入Vue和Vue Router库、定义路由：

//1.下载 v3.6.5 yarn add vue-router@3.6.5
//2.引入vue-router npm包
import Vue from 'vue'
import VueRouter from 'vue-router';
// 引入自定义组件页面 views目录) 配规则;
import FindMusic from '../views/FindMusic';
import MyFriend from '../views/MyFriend';
import MyMusic from '../views/MyMusic';

//3.安装注册VueRouter插件初始化
Vue.use(VueRouter);
//4.创建路由对象,定义路由规则
const router = new VueRouter({
  //route: 一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/findMusic', component: FindMusic },
    { path: '/myFriend', component: MyFriend },
    { path: '/myMusic', component: MyMusic },
  ]
})

//对外暴漏router对象;
export default router;

3.在主入口文件中引入路由器： 在main.js中：导入之前创建的路由器实例，并将其注入到Vue实例中；

import Vue from 'vue'
import App from './App.vue'

//引入并配置路由对象;
import router from './router/index';
Vue.config.productionTip = false;

//5.注入到new Vue中,建立关联
new Vue({
  render: h => h(App),
  router
}).$mount('#app');

在这里插入图片描述

Vue路由的进阶使用⏫：

声明式导航-导航链接

声明式导航： 它允许开发者通过在模板中使用<router-link>组件来定义导航链接，从而实现页面间的切换；

<router-link>组件： 它替代了传统的<a>标签，用于创建导航链接，通过设置to(必须)属性指定目标路由；

  • 路径匹配：to属性可以是字符串，表示路径，不需要加#，Vue Router会处理路由跳转；

  • 自定义样式： 可以通过这些类名来为激活的链接应用特定的样式，例如高亮显示；

  • 这种方式使得导航逻辑更加清晰，代码更加简洁，易于理解和维护；

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/findMusic">发现音乐</router-link>
      <router-link to="/myFriend">我的朋友</router-link>
      <router-link to="/myMusic">我的音乐</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {};
</script>
<style>
    <!-- 省略样式代码 -->
    .footer_wrap a.router-link-active {	background-color: purple; }
</style>

在这里插入图片描述

<router-link>默认会添加两个CSS类名来表示链接的激活状态：

  • .router-link-exact-active 通常在，精确匹配 整个路径时添加；

  • .router-link-active 会在链接对应的路由被激活时添加，适用于 模糊匹配 、设置高亮；

为什么 <router-link> 默认添加两个 CSS 类名？

<router-link>默认添加两个CSS类名，是为了提供两种不同级别的激活状态样式控制：

router-link-active：这个类的设计是为了实现包含匹配的激活逻辑

  • 这意味着当路由路径是某个<router-link>路径的前缀时，该类会被激活

  • 例如：当前路由是/users/123，那么所有指向/users/xxx链接都会被标记为活动状态

  • 这种设计考虑到了嵌套路由的场景，使得：父级菜单在子路由被访问时也能保持高亮，增强了导航的上下文感知；

在这里插入图片描述

router-link-exact-active：相对地，这个类仅在路径完全匹配时才被激活，提供了更精确的控制；

声明式导航-自定义类名

Vue Router为了提供更多的定制性，开发者可以自定义<router-link>激活时的CSS类名；

在你的Vue应用初始化时，可以通过以下方式来配置这些类名：

const router = new VueRouter({
  routes: [...], // 路由配置
  linkActiveClass: 'custom-active', 			// 自定义模糊匹配激活类名
  linkExactActiveClass: 'custom-exact-active' 	// 自定义精确匹配激活类名
});

在这里插入图片描述

声明式导航-查询传参

声明式导航是Vue Router中通过<router-link>组件实现的一种导航方式：

既然是导航，那么就会有不同的组件页面进行展示： 如：百度搜索，用户输入内容进行搜索，程序根据内容展示不同的结果；

为了方便操作，通常在： 跳转到另一个路由时，将一些数据作为查询参数附加到URL中，以便接收页面可以访问这些参数；

对此，<router-link> 提供两种传参方式： 查询参数传参、动态路由传参；

查询参数传参：

查询参数传参，比较适合传：多个参数 在<router-link>的to属性中：直接在路径后面使用问号(?)添加查询参数；

格式为： to="/route?param1=value1&param2=value2

views/VHome.vue： 搜索模块页面，导航views/Search.vue带参请求

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=Java慈祥">Java慈祥</router-link>
      <router-link to="/search?key=热爱学习">热爱学习</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>
<script>
  export default { name: 'VHome' }
</script>
<style></style>

接收参数： 在目标组件中，你可以通过$route.query.属性名 来访问这些参数传递值： views/Search.vue

<template>
  <div class="search">
    <!-- 在目标组件中，你可以通过$route.query对象来访问这些参数 -->
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'VSearch',
    created () {
      // 在created中，获取路由参数
      // this.$route.query.参数名 获取
      console.log(this.$route.query.key);
    }
  }
</script>
<style></style>

在这里插入图片描述

动态路由传参：

动态路由传参，优雅简洁：适合传单个参数 动态路由通过，在路径中使用冒号 :前缀的占位符来定义；

在这里插入图片描述

动态路由传参可选符

动态路由存在问题： 配了路由 path: "/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白；

/search/:words 表示，必须要传参数，如果不传参数，也希望匹配，可以加个可选符 "?"

在这里插入图片描述

Vue路由—重定向🔃

Vue Router的路由重定向是一种机制，它允许在用户尝试访问某个路径时自动将他们导航到另一个路径：

可以用来简化URL结构、实现默认页面或处理不存在的页面等场景：

在Vue Router的配置中，通过redirect属性来实现重定向；

//创建路由对象,定义路由规则
const router = new VueRouter({
    routes: [
        { path: '/', redirect: "/search" }, 
        { path: '/search/:words?', component: VSearch },
	],
});

Vue路由—404 配置

实际开发中，经常遇到访问到未定义目录，而出现空白页面情况： 为了用户体验，友好提示，通常会对此类页面进行友好提示；

//事先定义好一个404页面
//路由配置文件中引入页面组件
import NotFound from '@/views/NotFound';

//创建路由对象,定义路由规则
const router = new VueRouter({
    routes: [
        { path: '/', redirect: "/search" }, 
        { path: '/search/:words?', component: VSearch },
        //建议配在路由最后,程序自上而下匹配规则 * 表示匹配所有路径;
        { path: '*', component: NotFind }
	],
});

注意事项：

  • 确保在Vue应用中定义了404组件，并且在路由配置中正确导入
  • 对于history模式，服务器配置是关键，确保所有未定义的路径都返回应用的入口文件
  • 在开发环境中，Vue CLI通常会自动处理路由，但在生产环境部署时，服务器配置是必须的

Vue路由—模式设置

Vue Router 提供了两种路由模式来管理应用的URL行为： hash模式 \ history模式

Hash模式： 默认 在URL中使用#来标记路由的变化，如http://localhost:8080/#/home

  • 兼容性好，适用于所有现代浏览器以及大部分的老浏览器，它是基于浏览器的原生功能；

  • 这种模式依赖于浏览器的锚点（hashchange）事件，不需要服务器端的任何配置；

  • 缺点：URL中出现的#不太美观，且在某些场景可能与页面内的实际锚点冲突；

History模式： 利用HTML5的History APIpushState, replaceState来管理历史记录，从而提供无#的URL；

  • 优点：提供了更干净、更RESTful的URL，用户体验更好，路由看起来更像传统的服务器端路由；
  • 缺点：需要服务器端的配合，确保直接访问或刷新非根URL时；
//事先定义好一个404页面
//路由配置文件中引入页面组件
import NotFound from '@/views/NotFound';

//创建路由对象,定义路由规则
const router = new VueRouter({
    //History模式
    mode: "history",
    routes: [
        { path: '/', redirect: "/search" }, 
        { path: '/search/:words?', component: VSearch },
        //建议配在路由最后,程序自上而下匹配规则 * 表示匹配所有路径;
        { path: '*', component: NotFind }
	],
});

在这里插入图片描述

编程式导航：

Vue的编程式导航是指通过JavaScript代码 直接控制路由的跳转： 而不是通过HTML元素<router-link>触发；

路由跳转(两种)

需求： 点击搜索按钮 根据输入框，搜索对应数据；

在Vue 2中，通常在组件内部通过this.$router来访问路由器实例，并使用其方法进行导航；

path路径跳转语法：

main.JS设置： { path: '/路径', component: 组件模块 }

query传参： http://localhost:8080/路径?参数名=值，接受参数的方式是：$route.query.参数名

//简单写法 query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2');

//完整写法 query传参
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

动态路由传参： http://localhost:8080/路径/参数值，接受参数的方式是：$route.params.参数值

main.JS设置： { path: '/路径/:参数值?', component: 组件模块 }

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({ path: '/路径/参数值' });

在这里插入图片描述

name 命名路由跳转：

name命名传参和 Path路径传参类似： 因为Vue页面请求是模块化的，所以可以给请求定义名称，更方便进行跳转；

在/src/router/index.js路由规则： 声明路径、组件关系时，支持定于别名，方便跳转使用；

创建路由对象,定义路由规则
const router = new VueRouter({
  //History模式
  mode: "history",
  //route: 一条路由规则 { path: 路径, component: 组件 }
  routes: [
    //重定向默认home页;
    { path: '/', redirect: "/home" },
      
    // { path: '/search', component: VSearch },              //query参数传递
    // { path: '/search/:words?', component: VSearch },      //动态参数传递
    { path: '/search/', component: VSearch, name: 'search' },        	//组件别名 query参数传递
    // { path: '/search/:words?', component: VSearch, name: 'search' }, //组件别名 动态参数传递
    //建议配在路由最后,程序自上而下匹配规则 * 表示匹配所有路径;
    { path: '*', component: NotFound }
  ],
})

query传参： http://localhost:8080/路径?参数名=值，接受参数的方式是：$route.query.参数名 没有简单写法：

//query传参
this.$router.push({
  name: '路由名字',
  query: { 参数名1: '参数值1', 参数名2: '参数值2' }
})

动态路由传参： http://localhost:8080/路径/参数值，接受参数的方式是：$route.params.参数值

//动态路由
this.$router.push({
  name: '路由名字',
  params: { 参数名: '参数值' }
})

在这里插入图片描述

代码管理：

本代码已经使用Git进行管理： 公众号回复：VueRouter

在这里插入图片描述

慈様や
关注
  • 29
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入Vue-Router路由嵌套理解
12-09
首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此Root中要有router-view组件去承载子路由，才能实现子路由切换展示 一层路由 Root容器 <h1>Ro
Vue深入浅出
03-10
这是一个简单的Vue分享.ppt，轻松演示，画面简洁，一目了然！
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中配置多级路由并进行重定向，需要仔细处理每个级别的路由配置，确保路径书写正确且符合实际项目需求。当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过...
浅谈vue-router2路由参数注意的问题
11-27
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 ...以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 576
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1033
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue接入高德地图并实现基本的路线规划功能
最新发布
黄团团的个人博客
09-11 278
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 223
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 269
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
从`v-model`到显式绑定：掌控Vue组件中的数据流动20240910
Narutolxy的博客
09-10 427
v-model
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1030
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
vue3中的实例
weixin_48242059的博客
09-11 182
vue3：createApp创建一个Application Instance、应用实例用来注册全局内容，大多数方法支持链式调用，返回实例对象，除了mount方法，他返回组件对象也就是Component instance，还有一种较为特殊的组件类型为 Internal Component instance,在组件实例内部获取自身的实例，使用getcurrentInstance。Vue2：每个Vue应用都是new Vue创建的一个新实例，创建的时候将data作为property添加到响应式系统中。
【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现
weixin_43872912的博客
09-07 611
页面动画
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1063
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
Vue的slot插槽(默认插槽、具名插槽、作用域插槽)
Bulut0907
09-09 401
App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。
vue3项目打包后多级嵌套路由子路由刷新后空白问题
小怪獸丶的糖的专栏
09-11 254
Vue3项目打包发布后，进入个人中心界面,刷新后页面出现空白。前提是已经配置了重定向到index.html。在访问/personal/profile这种路由的时候刷新后页面会出现空白。在App.vue中有一个routerview ,personal界面中有一个routerview .界面如图所示。vite.config.js中将基础路径设置为绝对路径。之前是./改为/就可以了。router.js关键部分,删除了其他菜单路由。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 875
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
React 中的事件绑定与参数传递
正是修行时，正是修行时，正式修行时...
09-11 198
React 中的事件绑定与参数传递
Vue.js入门教程：深入理解vue-router路由管理
2. 创建路由对象：利用VueRouter构造函数创建一个新的路由对象，并传入一个配置对象。配置对象中最重要的部分是`routes`数组，它定义了多个路由规则。 3. 定义路由规则：每个路由规则是一个包含`path`和`component`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

慈様や

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

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

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

打赏作者

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

抵扣说明：

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

余额充值