当前位置: 首页 > news >正文

前端路由VueRouter总结

简介:

Vue路由vue-router是官方的路由插件,能够轻松的管理 SPA 项目中组件的切换。Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来vue-router 目前有 3.x 的版本和 4.x 的版本,vue-router 3.x 只能结合 vue2进行使用,vue-router 4.x 只能结合 vue3 进行使用

1.VueRouter的安装和引入

vue2版本执行命令

npm install vue-router@3.0.1

vue3版本执行命令

npm install vue-router@4

创建router文件夹和index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/discover',component: Discover},{path: '/my',component: My},{path: '/friend',component: Friends},]
})

在main.js中添加代码引入挂载router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'Vue.use(ElementUI);//配置请求根路径
axios.defaults.baseURL="http://127.0.0.1:8789/";//将axios作为全局的自定义属性,每个组件可以在内部直接访问
Vue.prototype.$http = axios;Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

2.VueRouter的常规使用方法

VueRouter的路由导航

创建Discover.vue,Friends.vue,My.vue并在App.vue使用导航显示

Discover.vue

<template><div><h1>发现音乐</h1></div>
</template> 

Friends.vue

<template><div><h1>关注</h1></div>
</template> 

My.vue

<template><div><h1>我的音乐</h1></div>
</template> 

App.vue

<template><div id="app"><!-- 声明路由链接 --><router-link to="/discover">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">关注</router-link><!-- 声明路由占位标签 --><router-view/></div>
</template><script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
import Table from '@/components/Table.vue'
export default {name: 'App',data:function(){return {movies:[{id:1,title:"金刚狼",rating:"8.8"},{id:2,title:"金刚狼2",rating:"8.9"},{id:3,title:"金刚狼3",rating:"9.0"},],tbdata:[]}},components:{First,Movie,Table}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

效果:

首页重定向的使用

修改router/index.js的首页路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'Vue.use(Router)export default new Router({routes: [{path: '/',redirect:'/discover'},{path: '/discover',component: Discover},{path: '/my',component: My},{path: '/friend',component: Friends},]
})

 这一进入首页后默认重定向到/dicover路由

效果:

嵌套路由的使用

 在Discover.vue中新建子路由链接及占位显示标签

<template><div><h1>发现音乐</h1><!-- 子路由链接 --><router-link to="/discover/toplist">推荐</router-link><router-link to="/discover/playlist">歌单</router-link><hr><router-view/></div>
</template> 

 新建需要显示的子模块TopList.vue和PlayList.vue

TopList.vue

<template><div><h2>推荐</h2></div>
</template> 

PlayList.vue

<template><div><h2>歌单</h2></div>
</template> 

在router/index.js中通过children属性,嵌套声明子路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'
import TopList from '@/components/TopList'
import PlayList from '@/components/PlayList'Vue.use(Router)export default new Router({routes: [{path: '/',redirect:'/discover'},{path: '/discover',component: Discover,//通过children属性,嵌套声明子路由children:[{path:"toplist",component:TopList},{path:"playlist",component:PlayList}]},{path: '/my',component: My},{path: '/friend',component: Friends},]
})

效果:

动态路由

 

 编程式导航

导航守卫 

相关文章:

前端路由VueRouter总结

简介&#xff1a; Vue路由vue-router是官方的路由插件&#xff0c;能够轻松的管理 SPA 项目中组件的切换。Vue的单页面应用是基于路由和组件的&#xff0c;路由用于设定访问路径&#xff0c;并将路径和组件映射起来vue-router 目前有 3.x 的版本和 4.x 的版本&#xff0c;vue-…...

基于SpringBoot+Vue的铁路订票管理系统(带1w+文档)

基于SpringBootVue的铁路订票管理系统(带1w文档) 基于SpringBootVue的铁路订票管理系统(带1w文档) 铁路订票管理工作向来都是社会上不可或缺的一部分&#xff0c;然而多年以来人们大都习惯使用传统方法&#xff0c;即人工来完成铁路订票的管理&#xff0c;但是这种方法存在着工…...

Firefox滚动条在Win10和Win11下表现不一致问题?

文章目录 前言总结解决方法 前言 最近在写页面的时候发现一个非常有意思的事。Firefox滚动条在Win10和Win11下表现居然不一致。在网上几经查找资料&#xff0c; 终于找到原因所在。总结成下面的文章&#xff0c;加深印象也防止下次遇到。 总结 参考文章&#xff1a; Firefox…...

vue3 组件传参

import {reactive,defineProps,onMounted,ref} from vue const props defineProps({ projectInfo: { type: Object, default: () > { return {}; } } }); console.log("&#x1f680; ~ 审核详情项目概述:", props.projectInfo) <Detail v-if"isReady…...

unity自动添加头部注释脚本

unity自动添加头部注释脚本&#xff0c;放在Assets目录自动生效 public class ScriptCreateInit : UnityEditor.AssetModificationProcessor {private static void OnWillCreateAsset(string path){path path.Replace(".meta", "");if (path.EndsWith(&qu…...

Raw格式化后文件能恢复吗 电脑磁盘格式化后如何恢复数据 硬盘格式变成了raw怎么恢复

硬盘、U盘等移动存储设备在存储数据文件上是非常方便的&#xff0c;不过在使用过程中也会因为操作、或者本身设备问题&#xff0c;导致存储设备出现各种各样的问题。较为常见的问题就是存储设备格式化、存储设备格式变为Raw格式等。今天要给大家分享的是有关Raw格式化的相关内容…...

Android targetSdkVersion改成33遇到的坑

targetSdkVersion 改成 33 &#xff0c;遇到一些坑。 需要注意的地方&#xff1a; 修改 targetSdkVersion 为 33。AndroidManifest.xml 里添加 android:exported“true”升级 Gradle 版本。升级第三方库。 修改 app 的 build.gradle &#xff0c; android {compileSdkVersi…...

1985-2023年中国城市统计年鉴(PDF+EXCEL)

1985-2023年中国城市统计年鉴 1、时间&#xff1a;1985-2023年 2、格式&#xff1a;1985-2023年PDF版本&#xff0c;1993-2023年excel格式 3、说明&#xff1a;中国城市统计年鉴收录了全国各级城市社会经济发展等方面的主要统计数据&#xff0c;数据来源于各城市的相关部门。…...

从AI小白到大神的7个细节:让你开窍逆袭

在当今科技界&#xff0c;人工智能无疑是最炙手可热的话题。然而&#xff0c;这个领域充斥着专业术语&#xff0c;使得理解每次技术革新的具体内容变得颇具挑战性。 为了帮助读者更好地把握时代脉搏&#xff0c;本文整理了一系列常见的人工智能&#xff08;AI&#xff09;术语…...

AIxBoard部署BLIP模型进行图文问答

一、AIxBoard简介 AIxBoard&#xff08;X板&#xff09;是一款IA架构的人工智能嵌入式开发板&#xff0c;体积小巧功能强大&#xff0c;可让您在图像分类、目标检测、分割和语音处理等应用中并行运行多个神经网络。它是一款面向专业创客、开发者的功能强大的小型计算机&#xf…...

小白零基础学数学建模应用系列(一):探索自由下落模型——以“坠落的硬币”为例

在数学建模竞赛中&#xff0c;选择一个易于理解且有趣的物理现象作为研究对象&#xff0c;往往能够使模型的构建和分析更具吸引力和说服力。本篇文章将以“坠落的硬币”这一经典的自由下落问题为例&#xff0c;探讨如何通过建立物理模型来验证或推翻常见的物理误解&#xff0c;…...

linux主机间免密登录

目录 原理&#xff1a; 相关命令&#xff1a; 一&#xff0c;执行命令 cd ~/.ssh/ &#xff0c;进入目录 二&#xff0c;如果没有公钥和秘钥文件&#xff0c;则执行命令来生成 三&#xff0c;负责公钥给远端端服务器命令 四&#xff0c;实操 场景一&#xff0c;localhos…...

【海思SS626 | VB】关于 视频缓存池 的理解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

RCE漏洞及绕过

目录 1、RCE概述 &#xff08;1&#xff09;命令执行函数 &#xff08;2&#xff09;代码执行函数 2、回调后门 3、eval和assert 限制字符长度绕过 &#xff08;1&#xff09;反引号或exec &#xff08;2&#xff09;file_put_contents写入文件 &#xff08;3&#xff…...

非对称加密算法-ECDHE

目录 1. ECDHE算法简介 密钥交换算法的重要性 ECDHE算法的基本原理 2. ECDHE与RSA算法的比较 RSA算法 ECDHE算法 比较 图形结合 2. HTTPS中的密钥交换 RSA算法的局限性 前向安全性的概念 图形结合 3. 离散对数问题 离散对数的定义 离散对数在密码学中的应用 图…...

10分钟学会Docker的安装和使用

前言 在现代软件开发中&#xff0c;Docker作为一种轻量级的容器化技术&#xff0c;已成为开发者必备的工具之一。本文将带您在10分钟内快速掌握Docker的安装和基本使用方法。 1. Docker是什么&#xff1f; Docker是一种开源的容器化平台&#xff0c;它通过将应用程序及其所有…...

江科大/江协科技 STM32学习笔记P20

文章目录 编码器接口测速定时器有关的库函数Encoder.cmain.c 编码器接口测速 编码器接口的初始化&#xff0c;第一步&#xff0c;RCC开启时钟&#xff0c;开启GPIO和定时器的时钟&#xff0c;第二步&#xff0c;配置GPIO&#xff0c;这里把PA6和PA7配置成输入模式&#xff0c;第…...

CSS 实现两边固定宽,中间自适应

0. **Flexbox 实现**&#xff1a; css复制代码.container { display: flex; } ​ .fixed { width: 200px; /* 两边固定宽度 */ } ​ .flexible { flex: 1; /* 中间自适应 */ } html复制代码<div class…...

C#图片批量下载Demo

目录 效果 项目 代码 下载 效果 C#图片批量下载 项目 代码 using Aspose.Cells; using NLog; using System; using System.Collections.Generic; using System.Data; using System.Diagnostics; using System.Drawing; using System.IO; using System.Linq; using System.…...

部署Springboot + Vue 项目到远程服务器Windows10系统的详细配置

远程服务器操作系统为Windows系统&#xff0c;Java程序环境&#xff0c;Maven环境都安装有&#xff0c;Mysql ,Redis等都有的前提下 1. mysql数据库导入&#xff0c;非常简单很好操作&#xff0c;这里省略。。比如用HeidiSql 或者Navicat 工具导入数据库 2. 后端javaSpringb…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...