Vue-路由

路由简介

SPA单页面应用。导航区和展示区

  1. 单页Web应用
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航连接不会刷新页面,只会做页面的局部更新
  4. 数据需要通过ajax请求获取

路由:路由就是一组映射关系,服务器接收到请求时,根据请求路径找到匹配的函数处理请求,返回响应数据

基本路由

main.js

import Vue from 'vue'
import App from './App.vue'//1.下载vue-router模块到当前工程,版本3.6.5
//2.引入
import VueRouter from 'vue-router'import ViewA from './views/ViewA.vue'
import ViewAA from './views/ViewAA.vue'
import ViewB from './views/ViewB.vue'
import ViewBB from './views/ViewBB.vue'Vue.config.productionTip = false
//3.安装注册
Vue.use(VueRouter)
//4.创建路由对象
const router=new VueRouter({routes:[{path: '/viewA', component :ViewA,children:[{path:'/viewAA',component:ViewAA}]},{path:'/viewB',component:ViewB,children:[{path:'/viewBB',component: ViewBB}]}]
})new Vue({render: h => h(App),//5.注册,将路由对象引入new Vue实例中,建立链接router
}).$mount('#app')

views/ViewA.vue

<template><div><h1>ViewA页面</h1><a href="#/viewAA">ViewAA页面</a><router-view></router-view></div>
</template><script>
export default {name:'ViewPageA'
}
</script><style></style>

views/ViewAA.vue

<template><div><h1>ViewAA页面</h1></div>
</template><script>
export default {name:'ViewPageAA'
}
</script><style></style>

views/ViewB.vue

<template><div><h1>ViewB页面</h1><a href="#/viewBB">ViewBB页面</a><router-view></router-view></div>
</template><script>
export default {name:'ViewPageB'
}
</script><style></style>

views/ViewBB.vue

<template><div><h1>ViewBB页面</h1></div>
</template><script>
export default {name:'ViewPageBB'
}
</script><style></style>

App.vue

<template><div><div><a href="#/viewA">ViewA页面</a><a href="#/viewB">ViewB页面</a></div><router-view></router-view></div>
</template><script>
export default {}
</script><style></style>

路由封装

1.将路由封装到一个js文件

2.模块导入改成绝对路径

注:ViewA.vue ViewAA.vue ViewB.vue ViewBB.vue App.vue与上面一样

封装 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import ViewA from '@/views/ViewA.vue'
import ViewAA from '@/views/ViewAA.vue'
import ViewB from '@/views/ViewB.vue'
import ViewBB from '@/views/ViewBB.vue'
Vue.use(VueRouter)
const router = new VueRouter({routes: [{path: '/viewA',component: ViewA,children:[{path: '/viewAA',component: ViewAA}]},{path: '/viewB',component: ViewB,children:[{path: '/viewBB',component: ViewBB}]}]
})
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router  from '@/router/index'console.log(router);Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

router-link控件

router-link控件,用于代替a标签,里面有两个高亮类名 router-link-active 模糊匹配(用的多) router-link-exact-active 精准匹配 也可以自定义高亮类名

1.router-link-active

模糊匹配(用的多)

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to=“/my” 仅可以匹配 /my

const router = new VueRouter(
{ 
routes: 
[ { path: '/my', component: My },{ path: '/find', component: Find } 
], // 模糊匹配,重新定义类名linkActiveClass: 'active', // 精确匹配,重新定义类名linkExactActiveClass: 'exact-active' 
})

声明式导航-跳转传参

注:遇到页面可能需要参数可能不需要参数path写法->   path:'/search/:words?' 

编程式导航

this.$router.push('路径/参数名1=参数值')

获取值写法: this.$route.query.参数名1

this.$router.push({ path:'/路径', params:{ 参数名1:'参数值1', 参数名2:'参数值2' } })

获取值写法:

this.$route.params.参数名1

this.$route.params.参数名2

路由设置

 

组件缓存keep-alive

keep-alive用于对组件进行缓存,不在此进行重新加载 keep-alive的三个属性

1.include:组件名数组,只有匹配的组件会被缓存

2.exclude:组件名数组,任何匹配的组件都不会被缓存

3.最多可以缓存多少组件实例

4.使用会触发两个生命周期函数 activated:当组件被激活使用的时候触发->进入页面触发 deactivated:当组件不被使用的时候触发->离开页面触发,注:activated、deactivated两个方法在缓存组件创建

views/ViewA.vue

<template><div><h1>ViewA页面</h1></div>
</template><script>
export default {name:'ViewPageA',created(){console.log('创建了A');},activated(){console.log('activated');},deactivated(){console.log('deactivated');}
}
</script><style></style>

views/ViewB.vue

<template><div><h1>ViewB页面</h1></div>
</template><script>
export default {name: 'ViewPageB',created() {console.log('创建了B');}
}
</script><style></style>

App.vue

<template><div><div><a href="#/viewA">ViewA页面</a><a href="#/viewB">ViewB页面</a></div><keep-alive :include="['ViewPageA']"><router-view></router-view></keep-alive></div>
</template><script>
export default {data() {return {checked: true}}
}
</script><style></style>

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

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

相关文章

[论文阅读笔记33] Matching Anything by Segmenting Anything (CVPR2024 highlight)

这篇文章借助SAM模型强大的泛化性&#xff0c;在任意域上进行任意的多目标跟踪&#xff0c;而无需任何额外的标注。 其核心思想就是在训练的过程中&#xff0c;利用strong augmentation对一张图片进行变换&#xff0c;然后用SAM分割出其中的对象&#xff0c;因此可以找到一组图…

k8s集群node节点加入失败

出现这种情况&#xff1a; [preflight] FYI: You can look at this config file with kubectl -n kube-system get cm kubeadm-config -o yaml [kubelet-start] Writing kubelet configuration to file "/var/lib/kubelet/config.yaml" [kubelet-start] Writing kub…

python 识别图片点击,设置坐标,离设置坐标越近的优先识别点击

import pyautogui import cv2 import numpy as np import mathdef find_and_click(template_path, target_x, target_y, match_threshold0.8):"""在屏幕上查找目标图片并点击。Args:template_path: 目标图片的路径。target_x: 预设的坐标 x 轴值。target_y: 预设…

【Android面试八股文】如何优化二维码的扫描速度?

文章目录 一、 普通优化1.1 解码优化1.1.1 减少解码格式1.1.2 解码算法优化1.1.3. 减少解码数据1.1.4. Zbar 与 Zxing融合1.2 优化相机设置1.2.1. 选择最佳预览尺寸/图片尺寸1.2.2. 设置适合的相机放大倍数1.2.3. 调整聚焦时间1.2.4. 设置自动对焦区域1.2.5. 调整合理扫描区域1…

OpenCV报错已解决:Vector析构异常OpencvAssert CrtlsValidHeapPointer

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 在使用OpenCV进行图像处理时&#xff0c;我们可能会遇到Vector析构异常OpencvAssert CrtlsValidHeapPointer的问题。本文将…

基于LMS自适应滤波的窄带信号宽带噪声去除(MATLAB R2021B)

数十年的研究极大的发展了自适应滤波理论&#xff0c;自适应滤波理论已经成为信号处理领域研究的热点之一。从理论上讲&#xff0c;自适应滤波问题没有唯一解。为了得到自适应滤波器及其应用系统&#xff0c;可以根据不同的优化准则推导出许多不同的自适应理论。目前该理论主要…

在eclipse中导入idea项目步骤

一、可以把其它项目的.project&#xff0c; .classpath文件拷贝过来&#xff0c;修改相应的地方则可。 1、.project文件只需要修改<name>xxx</name>这个项目名称则可 2、.classpath文件通常不用改&#xff0c; 二、右击 项目名 >选择“Properties”>选择 Re…

自动驾驶⻋辆环境感知:多传感器融合

目录 一、多传感器融合技术概述 二、基于传统方法的多传感器融合 三、基于深度学习的视觉和LiDAR的目标级融合 四、基于深度学习的视觉和LiDAR数据的前融合方法 概念介绍 同步和配准 时间同步 标定 摄像机内参标定&#xff08;使用OpenCV&#xff09; 摄像机与LiDAR外…

分库分表相关概念

分库分表相关概念 文章目录 分库分表相关概念分库分表的概念水平分库分表水平分表水平分库水平分库分表的实现方式 垂直分库分表垂直分表垂直分库 分库分表的挑战 核心概念一、逻辑表二、物理表三、数据节点四、绑定表&#xff08;Binding Table&#xff09;五、广播表&#xf…

ASP.NET Core Blazor 3:使用 Blazor Server (2)

1 准备工作 继续使用上一章项目。   本章展示如何组合Razor组件来创建更复杂的特性。展示如何创建组件之间的父子关系&#xff0c;如何利用属性配置组件&#xff0c;以及如何创建自定义事件&#xff0c;以在发生重要更改时发出信号。还展示了组件如何从父组件接收内容&#x…

C语言 有一函数,当x<0则y=-1,当x=1则y=0,当x>0则y=1,以下是关于该函数的两个c程序,请分析它们是否能实现函数的要求?

题目代码&#xff1a; &#xff08;1&#xff09; #include<stdio.h>int main(){int x,y;printf(“enter x:”);scanf(“%d”,&x);y-1;if(x!0)if(x>0)y1;elesy0;printf(“x%d,y%d\n”,x,y);return 0;} (2) #include<stdio.h>int main(){int x,y;printf(…

软考初级网络管理员__编程单选题

1.为了提高程序的可读性&#xff0c;在编写源程序时需要。 添加注释 减少全局变量 注重程序执行效率 减少存储空间 2.在应用程序开发中&#xff0c;从源代码到可执行文件&#xff0c;需要经过四个步骤&#xff0c;将汇编代码转变为机器可以执行的指令的过程称为()。 预编…

微软推出最新视觉基础模型Florence-2 可在浏览器运行

据微软官方消息&#xff0c;微软推出视觉基础模型Florence-2&#xff0c;该模型现已能够在支持WebGPU的浏览器中100%本地运行。Florence-2-base-ft是一个拥有2.3亿参数的视觉基础模型&#xff0c;采用基于提示的方法来处理广泛的视觉和视觉语言任务。 该模型支持多种功能&…

C++ tcp中的可变长度结构体的序列化和反序列化

近日&#xff0c;在项目里&#xff0c;需要对tcp传输的数据进行序列化和反序列化&#xff0c;有很多方法&#xff0c;记录下来 写在前面&#xff1a;使用tcp传输的时候需要注意字节对齐的问题&#xff0c;在以下代码中统一使用单字节对齐 //单字节对齐 写在结构体定义之上 #…

【C++】拷贝构造函数

目录 前言 一、什么是拷贝构造函数&#xff1f; 拷贝构造函数的定义 拷贝构造函数的调用 二、拷贝构造函数的应用 三、拷贝构造函数的最佳实践 四、拷贝构造函数的常见问题 死递归 未使用常量引用 五、总结 前言 在C编程中&#xff0c;拷贝构造是一个重要的概念。理解…

MacOS原版镜像iso下载

苹果公司不提供 macOS 系统的官方 ISO 镜像下载。相反&#xff0c;macOS 系统的更新和安装通常通过 Mac App Store 进行。如果你需要创建一个 macOS 安装盘或 USB 驱动器&#xff0c;你可以直接从 Mac App Store 下载完整的 macOS 安装程序&#xff0c;并使用内置的工具来创建可…

IDEA 插件推荐【一】

好使的插件可以让工作事倍功半。下面就推荐一些常用的IDEA插件&#xff0c;如果你有其他好使的插件&#xff0c;欢迎评论区留言分享出来~ 1.Key Promoter X Key Promoter X 插件&#xff0c;IDEA 快捷键提示工具。 在每次我们使用鼠标进行 IDEA 的某个操作&#xff0c;Key Pr…

lambda-map.merge

map.merge 结论: 1.当前传入的 key ,value biFunction 2.如果之前map不存在则直接put(当前key,当前value) 3.如果之前map已经有了,老value与 当前value 进入function处理后再 put(当前key,处理后的value)

IDEA使用Apidocx插件在RAP生成接口文档

第一步 安装插件&#xff0c;安装最新的1.1.7即可&#xff0c;插件与idea版本对照 第二步 输入对应的IP或域名&#xff0c;端口说明&#xff1a; 1. 38080&#xff1a;为后端数据 API 服务器&#xff08;rap2-delos&#xff09; 2. 3000&#xff1a;为前端静态资源服务&…

安全技术和防火墙(二)

接上一节 备份和还原 iptables-save > /opt/iptables.bak iptables-restore < /opt/iptables.bak snat和dnat snat源地址转换 内网到外网 内网ip转换成可以访问外网的ip 内网的多个主机可以只有一个有效的公网ip地址访问外部网络 dnat 目的地址转发 外部用户&#…