Vue-router

router的使用（5+2）

5个基础步骤：

1.在终端执行yarn add vue-router@3.6.5，安装router插件

yarn add vue-router@3.6.5

2.在文件的main.js中引入router插件

import VueRouter from 'vue-router'

3.在main.js中安装注册Vue.use(Vue插件)

Vue.use(VueRouter)

4.在main.js中创建路由对象

const router = new VueRouter()

5.注入到new Vue中，建立关联

new Vue({render: h => h(App),router: router
}).$mount('#app')

2个核心步骤：

1.创建需要的组件（views目录)，配置路由规则

import Find from './views/Find.vue'
import Friend from './views/Friend.vue'
import My from './views/My.vue'
Vue.use(VueRouter)//VueRouter插件初始化const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]
})

2.准备导航链接，配置路由出口

<template><div><div><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">我的朋友</a></div><div><router-view></router-view></div></div>
</template>

Vue Router 提供了以下常用的标签和功能：

  1. <router-link>：渲染一个 <a> 标签，点击时会导航到指定的路由。
  2. <router-view>：用于渲染匹配到的路由组件。
  3. router-link 组件的 to 属性：用于指定要跳转的目标路由，可以是字符串或对象。
  4. router-view 组件：用于根据当前路由匹配到的组件进行渲染。

路由的封装抽离

目标：将路由模块抽离出来

好处：拆分模块，利于维护

在src目录下创建router文件，在文件中创建index.js文件，将main.js中的路由模块抽离到index.js文件中

import VueRouter from 'vue-router'
import Find from '../views/Find.vue'
import Friend from '../views/Friend.vue'
import My from '../views/My.vue'import Vue from 'vue'
Vue.use(VueRouter)//VueRouter插件初始化const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]
})export default router

在main.js中引入index.js文件

import router from './router'

声明式导航-导航链接

需求：实现导航高亮效果

vue-router提供了一个全局组件router-link（取代a标签）

  1. 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
  2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

1.router-link-active 模糊匹配（用的多）

to = '/my' 可以匹配/my      /my/a      /my/b   .......

2.router-link-exact-active 精确匹配

to = '/my' 仅可以匹配 /my

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">我的朋友</router-link></div><div><router-view></router-view></div></div>
</template>
.footer_wrap a.router-link-active{background-color: aqua;
}

自定义匹配类名

const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})
.footer_wrap a.active{background-color: aqua;
}

声明式导航-跳转传参

目标：在跳转路由时，进行传值

1.查询参数传参

语法格式如下

  • to = '/path?参数名 = 值'

对应页面组件接收传递过来的值

  • $route.query.参数名
<template><div class="home"><router-link to="/search?key=百度">百度</router-link><router-link to="/search?key=网易">网易</router-link><router-link to="/search?key=腾讯">腾讯</router-link></div>
</template>

<template><div><p>搜索关键字：{{ $route.query.key }}</p><p></p></div>
</template>

2.动态路由传参

1.配置动态路由

const router = new VueRouter({// 路由规则routes:[{path:'/search/:words',component:Search},{path:'/home',component:Home}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

2.配置导航链接

  • to="/path/参数值"
<template><div class="home"><router-link to="/search/百度">百度</router-link><router-link to="/search/网易">网易</router-link><router-link to="/search/腾讯">腾讯</router-link></div>
</template>

3.对应页面组件接收传递过来的值

  • $route.params.参数名
<template><div><p>搜索关键字：{{ $route.params.words }}</p><p></p></div>
</template>

Vue路由-重定向

问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白

说明：重定向：匹配path后，强制跳转path路径

语法：

{path: 匹配路径，redirect:重定向到的路径}

const router = new VueRouter({// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

Vue路由-404

作用：当路径找不到时，给个提示页面

位置：配在路由最后

语法：

{path:"*"(任意路径)-前面不匹配就命中最后这个}

const router = new VueRouter({// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home},{path:'*',component:NotFound}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

Vue路由-模式设置

问题：路由的路径看起来不自然，有#，能否切成真正的路径模式

  • hash路由（默认）例如：http://localhost:8080/#/home
  • history路由（常用）例如：http：//localhost:8080/home（以后上线需要服务器端支持）
const router = new VueRouter({mode:'history',// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home},{path:'*',component:NotFound}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

历史记录在vue-router中的使用

历史记录在Vue Router中主要通过router对象来管理。具体来说，你可以使用this.$router来访问router对象。

要在Vue Router中使用历史记录，你可以通过以下方式进行操作：

编程式导航： 你可以使用this.$router.push()方法来向历史记录添加一个新的条目，或者使用this.$router.replace()方法来替换当前的历史记录条目。例如：

// 添加新的历史记录条目
this.$router.push('/new-route');// 替换当前的历史记录条目
this.$router.replace('/new-route');

控制历史记录： 你可以使用this.$router.go()方法来在历史记录中前进或后退多少步，也可以使用this.$router.back()和this.$router.forward()方法来执行后退或前进操作。

// 后退一步
this.$router.go(-1);// 前进一步
this.$router.go(1);

监听历史记录变化： 你可以通过监听this.$router对象的事件来处理历史记录的变化。例如，你可以监听beforeEach、beforeResolve和afterEach等事件来执行相应的操作。

this.$router.beforeEach((to, from, next) => {// 在导航触发之前执行的逻辑
});this.$router.afterEach((to, from) => {// 导航完成后执行的逻辑
});

实现嵌套路由

// 父路由组件
const router = new VueRouter({routes: [{ path: '/parent', component: ParentComponent, children: [{ path: 'child', component: ChildComponent }]}]
});

命名视图

命名视图（Named Views）是 Vue Router 提供的一项功能，允许你在同一个页面中同时显示多个命名视图的内容。这在构建复杂的页面布局时非常有用，可以让不同的组件渲染到页面中不同的位置。

在 Vue Router 中使用命名视图，需要在路由配置中指定每个视图的名称，并在组件中使用 <router-view> 标签来显示对应名称的视图内容。

const router = new VueRouter({routes: [{path: '/',components: {default: HomeComponent,header: HeaderComponent,sidebar: SidebarComponent}}]
});

在上面的路由配置中，我们定义了三个命名视图：default、header 和 sidebar，分别对应不同的组件。然后在页面模板中可以这样使用：

<div id="app"><router-view name="header"></router-view><router-view></router-view> <!-- 默认会显示 default 视图 --><router-view name="sidebar"></router-view>
</div>

导航守卫

导航守卫是 Vue Router 中用于控制路由跳转的功能，可以在路由导航过程中进行一些操作，比如权限验证、页面加载前后的处理等。导航守卫主要分为全局前置守卫、全局解析守卫、全局后置钩子和路由独享守卫。

1. 全局前置守卫（Global Before Guards）

  • beforeEach(to, from, next)：在路由跳转之前调用，常用于进行权限验证或其他全局操作。

2. 全局解析守卫（Global Resolve Guards）

  • beforeResolve(to, from, next)：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。

3. 全局后置钩子（Global After Hooks）

  • afterEach(to, from)：在导航完成之后调用，常用于页面切换后的一些操作。

4. 路由独享守卫（Per-Route Guard）

  • beforeEnter(to, from, next)：在单个路由配置中定义的守卫，在进入该路由前调用。
  • const router = new VueRouter({routes: [{path: '/home',component: HomeComponent,beforeEnter: (to, from, next) => {// 进入路由前的操作，如权限验证if (userAuthenticated) {next();} else {next('/login');}}}]
});router.beforeEach((to, from, next) => {// 全局前置守卫，可用于登录状态验证等next();
});router.afterEach((to, from) => {// 全局后置钩子，在导航完成后调用
});

    路由元信息

    路由元信息是 Vue Router 中一种特殊的字段，允许你在路由对象中添加额外的自定义信息，比如页面标题、权限要求、页面描述等。这些元信息可以在路由导航过程中访问，并根据需要进行处理。

    export default {mounted() {console.log(this.$route.meta.title); // 输出 'Home Page'}
};

在路由组件中，你可以通过 this.$route.meta 来访问路由的元信息

const router = new VueRouter({routes: [{path: '/',component: Home,meta: { requiresAuth: true, title: 'Home Page' }}]
});

路由过渡动效

Vue Router 提供了过渡效果的功能，可以让页面在路由切换时产生动画效果，提升用户体验。你可以使用 Vue 的 <transition> 组件或 <transition-group> 组件来实现路由过渡动效。

使用 <transition> 组件：

<template><transition name="fade" mode="out-in"><router-view></router-view></transition>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

使用 <transition-group> 组件：

<template><transition-group name="slide" mode="out-in"><router-view></router-view></transition-group>
</template><style>
.slide-enter-active, .slide-leave-active {transition: transform 0.5s;
}
.slide-enter, .slide-leave-to {transform: translateX(100%);
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/737615.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

力扣：链表篇章

力扣：链表篇章

1、链表 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个节点的指针域指向null&#xff08;空指针的意思&#xff09;。 2、链表的类…
阅读更多...
Python高级二

Python高级二

一、异常 1、定义 异常是在程序执行过程中出现的错误或意外情况。当程序遇到异常时&#xff0c;它会中断当前的执行流程&#xff0c;并尝试找到相应的异常处理机制来解决问题。 2、常见异常类型 SyntaxError&#xff1a;语法错误&#xff0c;通常是代码书写不符合Python语法规则…
阅读更多...
【前端】移动端布局

【前端】移动端布局

目录 1.移动端特点 分辨率 二倍图 2.百分比布局 3.flex布局 3.1flex布局模型 3.2主轴对齐方式 3.3 侧轴对齐方式 3.4flex属性 1.移动端特点 PC端网页和移动端网页的不同 PC端网页&#xff1a;屏幕大&#xff0c;网页固定版心 jd.com移动端网页&#xff1a;屏幕小 没…
阅读更多...
实战案例——Kafka集群部署

实战案例——Kafka集群部署

1. 规划节点 IP主机名节点192.168.100.10zookeeper1集群节点192.168.100.20zookeeper2集群节点192.168.100.30zookeeper集群节点 2. 基础准备 使用ZooKeeper集群搭建的3个节点来构建Kafka集群&#xff0c;因为Kafka服务依赖于ZooKeeper服务&#xff0c; 所以不再多创建云主机…
阅读更多...
vue前端获取本地IP地址

vue前端获取本地IP地址

新建js文件 getIpAddress.js //获取本机的IP地址 function getNetworkIp() {let ip localhost;try {const network Os.networkInterfaces();//获取本机的网路for (const iter in network) {const faces network[iter];for (const interface of faces) {if (interface.fami…
阅读更多...
接口自动化测试的三个阶段

接口自动化测试的三个阶段

根本目标 测试环境中&#xff0c;保证新增接口功能正确性&#xff0c;原有接口的回归&#xff08;保证原有接口不被修改“坏”&#xff09;&#xff1b; 生产环境中&#xff0c;保证接口层面服务可用&#xff0c;功能的正确性&#xff08;保证服务挂掉时&#xff0c;及时发现…
阅读更多...
pytorch入门

pytorch入门

相比起keras和tensorflow,个人感觉pytorch更好一些 相比起程序语言本身,个人感觉,记住解决问题的步骤和方法更重要 import torch ttorch.tensor(1) t.size() t1torch.rand((3,4)) torch.Tensor? torch.empty((3,3)) devicetorch.device(cuda if torch.cuda.is_available() els…
阅读更多...
Python爬网页，不确定网页的编码，不需要用第三方库

Python爬网页，不确定网页的编码，不需要用第三方库

Python爬网页&#xff0c;不确定网页的编码&#xff0c;不需要用第三方库&#xff0c;自己写个判断&#xff0c;乱拳打死老师傅 detect试了&#xff0c;不好用 apparent_encoding试了&#xff0c;不好用 encoding试了&#xff0c;不好用 headers里get试了&#xff0c;不好用…
阅读更多...
户口本怎么翻译成英文

户口本怎么翻译成英文

户口本翻译件一般用于出国旅游签证、商务签证、移民留学等业务时&#xff0c;申请人所需提交的文件之一。户口本翻译件需要正规有资质的翻译机构翻译并加盖翻译专用章,这样才能得到有关部门的认可。那么&#xff0c;英国签证户口本翻译&#xff0c;中译英怎么翻译比较好&#x…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）

鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）

通过bindContentCover属性为组件绑定全屏模态页面&#xff0c;在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。 说明&#xff1a; 从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 不支持横竖屏切换。…
阅读更多...
TCP三次握手，四次挥手状态转移过程

TCP三次握手，四次挥手状态转移过程

1.TCP状态转移过程 TCP连接的任意一端都是一个状态机,在TCP连接从建立到断开的整个过程中,连接两端的状态机将经历不同的状态变迁.理解TCP状态转移对于调试网络应用程序将有很大的帮助. 2.三次握手状态转换 3.四次挥手状态转换 4.TIME WAIT状态详解 为什么要有一个"TIME…
阅读更多...
数据标注专业团队

数据标注专业团队

数据标注服务 在跟一些淘宝、多多商家老板合作后&#xff0c;客户一般付款后&#xff0c;中介是有20%左右的提成&#xff0c;我们主要是希望可以实现数据标注无中介化&#xff0c;有需求可以直接联系数据标注团队直接负责人&#xff0c; 若有意愿请添加添加v&#xff1a;shu_ju…
阅读更多...
9. 内核、文件系统加载工具

9. 内核、文件系统加载工具

内核、文件系统加载工具 内核、文件系统加载工具是嵌入式开发必备的工具 1. 烧写BootLoader 1.1 通过超级终端方式 烧写 Bootloader 可以使用超级终端的“传送” |“发送文件”命令进入发送文件对话框&#xff0c;使用 Xmodem 协议和 Kermit 协议发送 Bootloader 的各个文件…
阅读更多...
docker安装rocketMq

docker安装rocketMq

在搭建之前&#xff0c;我们需要做一些准备工作&#xff0c;这里我们需要使用 docker 搭建服务&#xff0c;所以需要提前安装 docker。 此外&#xff0c;由于 rocketmq 需要部署 broker 与 nameserver &#xff0c;考虑到分开部署比较麻烦&#xff0c;这里将会使用docker-comp…
阅读更多...
网络模块使用Hilt注入

网络模块使用Hilt注入

retrofit的异步回调方法已经做了线程切换&#xff0c;切换到了主线程 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"><uses-permission android:name"andr…
阅读更多...
JS原型链面试题

JS原型链面试题

题目1 function Person(name) {this.name name; }Person.prototype.sayHello function() {console.log(Hello, this.name); };var john new Person(John); john.sayHello();请问上述代码的输出结果是什么&#xff1f; 答案1 输出结果是&#xff1a;Hello, John 题目2 …
阅读更多...
如何通过Python代码连接OceanBase Oracle租户

如何通过Python代码连接OceanBase Oracle租户

背景 目前&#xff0c;连接数据库的Oracle租户&#xff0c;只能通过Java和C的驱动程序&#xff0c;无法通过其他语言的驱动程序。为了满足社区中用户希望在Python代码中连接Oracle租户的需求&#xff0c;这里提供一种替代方案。通过结合使用JayDeBeApi和JDBC&#xff0c;我们可…
阅读更多...
Docker使用及部署流程

Docker使用及部署流程

文章目录 1. 准备Docker环境2. 准备应用的Docker镜像3. 在服务器上运行Docker容器方法一：Docker Hub方法二：从构建环境传输镜像4. 管理和维护使用Docker Compose（可选）主要区别步骤 1: 安装Docker ComposeLinuxWindowMac步骤 2: 创建docker-compose.yml文件步骤 3: 使用Doc…
阅读更多...
牛客网KY266 反序数

牛客网KY266 反序数

题目 描述&#xff1a; 设N是一个四位数&#xff0c;它的9倍恰好是其反序数&#xff08;例如&#xff1a;1234的反序数是4321&#xff09;求N的值。 输入描述&#xff1a; 程序无任何输入数据。 输出描述&#xff1a; 输出题目要求的四位数&#xff0c;如果结果有多组&#xff…
阅读更多...
超越 Siri 和 Alexa：探索LLM（大型语言模型）的世界

超越 Siri 和 Alexa：探索LLM（大型语言模型）的世界

揭秘LLM&#xff1a;语言模型新革命&#xff0c;智能交互的未来趋势 近年来&#xff0c;虚拟助手的世界发生了重大转变。 虽然 Siri 和 Alexa 本身就是革命性的&#xff0c;但一种称为大型语言模型 (LLM) 的新型人工智能正在将虚拟助手的概念提升到一个全新的水平。 在这篇博文…
阅读更多...
最新文章

Copyright @ 2022~2023