vue路由的基本使用

vue路由的基本使用

  • vue-router简介
  • 一、路由配置和使用
    • 1、安装
    • 2、创建路由实例
    • 2、在组件中引用路由 router-view ,如APP根组件中直接引用:
    • 3、最后还需要把路由挂载到APP实例中,在==main.js==中注册路由:
  • 二、路由重定向与别名
  • 三、声明式导航
    • 1、传统的导航
    • 2、通过路由router-link
  • 四、嵌套路由
  • 四、命名路由
  • 五、取消路由组件在前进后退
  • 命名路由
  • 二、嵌套(多级)路由
    • 二级目录
      • 三级目录

vue-router简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

一、路由配置和使用

1、安装

打开项目终端,通过npm安装

npm install vue-router@4

2、创建路由实例

在项目中src目录想创建Router文件夹,新建index.js文件,在这个文件下配置路由:

import { createWebHashHistory, createRouter } from 'vue-router'import Center from '../view/Center.vue' //引入组件路径(路由组件尽量放在view文件夹下)
import Home from '../view/Home.vue'const routes = [{ path: '/Center', //跳转的路径name:'Center ' //命名路由,也可以不写component: Center //跳转到对应的组件
},{ path: '/Home', component: Home
},
]const router = createRouter({history: createWebHashHistory(),//hash的模式,如#/home,#/center  带#号的路径routes,//`routes:routes`的缩写
})export default router

2、在组件中引用路由 router-view ,如APP根组件中直接引用:

<template>app<!--插槽--><router-view></router-view></template>

3、最后还需要把路由挂载到APP实例中,在main.js中注册路由:


import { createApp } from 'vue'
import App from './App.vue'
import router from './Router' //直接导入Router文件夹,会自动找到index.js这个文件const app=createApp(App)app.use(router) //注册路由插件
app.mount('#app')

直接输入对应的路径,显示对应的组件,到此路由的基本模型已经做好了

在这里插入图片描述

二、路由重定向与别名

  • 重定向也是通过 routes 配置redirect来完成,下面例子是从 /home 重定向到 /:
const routes = [{ path: '/home', redirect: '/' }
]
  • 重定向的目标也可以是一个命名的路由:(路由通过name来命名)
const routes = [{ path: '/home', redirect: { name: 'center' } }]
  • 常规参数只匹配url片段之间的字符,用 / 分割。如果我们想匹配任意路径,我们可以自定义的路径参数正则表达式,在路径参数后面的括号中加入 正则表达式:
const routes = [{ path: '/:pathMatch(.*)*', //pathMatch只是占位符,任意字母都可以name:'NotFound',component: NotFound},
]
  • 别名alias属性表示,当url匹配到别名/abc,也会跳转到组件center中去
const routes = [{ path: '/Center', component: Center ,alias:'/abc'  //注意别名有个/;也可以用数组alias: ['/abc', 'aaa']},
]

三、声明式导航

1、传统的导航

通过a标签跳转

<div class="tabbar"><ul><li><a href="#/home">首页</a></li><li><a href="#/films">影院</a></li><li><a href="#/center">我的</a></li></ul></div>

2、通过路由router-link

  • to跳转到对应的路由,不需要加#号
  • 不过标签会带a标签的样式,底部会有个下划线不太好看,后面我们也可以通过$route.push跳转的方法
 <ul><li><router-link to="/home">首页</router-link> </li><li><router-link to="/films">影院</router-link> </li><li><router-link to="/center">我的</router-link></li>
</ul>
  • 通过active-class="kerwin"来命名,使选中的显示高亮
<template><div class="tabbar"><ul><li><router-link to="/home" active-class="kerwin">首页</router-link></li><li><router-link to="/films"  active-class="kerwin">影院</router-link> </li><li><router-link to="/center"  active-class="kerwin">我的</router-link></li></ul></div></template>
<script setup></script>
<style scoped>
.kerwin{color: red;
}
.tabbar{position: fixed;width: 100%;height: 50px;line-height: 50px;text-align: center;bottom: 10px;
}
.tabbar ul{display: flex;}.tabbar ul li{flex:1;
}</style>

如图所示:
在这里插入图片描述

四、嵌套路由

一个路由组件下面,再嵌套路由,要将组件渲染到这个嵌套的 router-view 中,我们需要在路由中配置 children:

const routes = [{path: '/user',component: User,children: [{// 当 /user/profile 匹配成功// UserProfile 将被渲染到 User 的 <router-view> 内部path: 'profile',// path: '/user/profile'的简写,通过http://localhost:5173/#/user/profile访问component: UserProfile,},{// 当 /posts 匹配成功// UserPosts 将被渲染到 User 的 <router-view> 内部path: '/posts', //注:可以通过http://localhost:5173/#/posts访问component: UserPosts,},],},
]
注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。

四、命名路由

五、取消路由组件在前进后退

命名路由

二、嵌套(多级)路由

二级目录

三级目录

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

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

相关文章

大模型低资源部署策略

文章目录 解码效率分析大模型训练后量化方法经验性分析与相关结论由于大模型的参数量巨大,在解码阶段需要占用大量的显存资源,因而在实际应用中的部署代价非常高。在本文中,我们将介绍一种常用的模型压缩方法,即模型量化(ModelQuantization),来减少大模型的显存占用,从…

基于Springboot+微信小程序的“学课助手”小程序 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 该系统…

如何将原本打开Edge呈现出的360浏览器,更换成原本的Edge页面或者百度等其他页面

每次打开Edge浏览器&#xff0c;都会呈现出360浏览器的页面&#xff0c;很烦。以下将说明如果将呈现出的360浏览器&#xff0c;更换成原本的Edge页面或者百度等其他页面。 1.找到你的控制面板&#xff0c;点击卸载程序。 2. 找到360安全卫士&#xff0c;右键单击更改/卸载。 3…

云原生笔记

#1024程序员节|征文# 单页应用(Single-Page Application&#xff0c;SPA) 云原生基础 云原生全景内容宽泛&#xff0c;以至于刚开始就极具挑战性。 云原生应用是高度分布式系统&#xff0c;它们存在于云中&#xff0c;并且能够对变化保持韧性。系统是由多个服务组成的&#…

Android 下载进度条HorizontalProgressView 基础版

一个最基础的自定义View 水平横向进度条&#xff0c;只有圆角、下载进度控制&#xff1b;可二次定制度高&#xff1b; 核心代码&#xff1a; Overrideprotected void onDraw(NonNull Canvas canvas) {super.onDraw(canvas);int mW getMeasuredWidth();int mH getMeasuredHei…

WebGL进阶(五)-可视域

理论基础&#xff1a; 顶点着色器 Vertex Shader 主要是负责处理顶点位置、顶点颜色、顶点向量等顶点的数据&#xff1b;处理一些顶点的变换&#xff1a;例如在进行视图变换和投影变换时MVP矩阵会改变顶点的位置信息。 输入&#xff1a; 顶点着色器输入部分主要是声明&…

Android中常用adb命令

目录 1.adb连接安卓模拟器 2.adb列出所有已经连接的设备 3.adb显示设备的日志信息 4.adb 电脑文件推送到安卓模拟器中 5.adb 手机传送文件到电脑 6.adb获取安卓应用的包名和Activity名 附录 1--命令 1&#xff09;adb devices 2&#xff09;adb install 路径> 3&#xff09;…

windows 下安装 make

Error running ‘docs’: Cannot run program “\usr\bin\make” (in directory “F:\xx\goland-api\xxxx-go”): CreateProcess error2, 系统找不到指定的文件。 windows上安装&#xff1a;chocolatey github地址&#xff1a; https://github.com/chocolatey/choco/releases然…

PAT甲级-1052 Linked List Sorting

题目 题目大意 给定一个链表&#xff0c;要求按链表中的数值从小到大排序生成新的链表。输出有效节点的个数和链表的起始地址&#xff0c;以及链表本身。 思路 链表用结构体数组来表示&#xff0c;然后用sort自定义排序。需要注意的是&#xff0c;链表中存在无效节点&#x…

【CSS in Depth 2 精译_055】8.3 伪类 :is() 和 :where() 的正确打开方式

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第三部分 现代 CSS 代码组织】 ✔️【第八章 层叠图层及其嵌套】 ✔️ 8.1 用 layer 图层来操控层叠规则&#xff08;上篇&#xff09; 8.1.1 图层的定义&#xff08;上篇&#xff09;8.1.2 图层的…

React基础语法

1.React介绍 React由Meta公司开发&#xff0c;是一个用于构建Web和原生交互界面的库 1.1 React优势 相较于传统基于DOM开发的优势 1.组件化的开发方式 2.不错的性能 相较于其他前端框架的优势 1.丰富的生态 2.跨平台支持 1.2React的时长情况 全球最流行&#xff0c;大厂…

C语言数据结构:排序(2)

文章目录 4.选择排序4.1 基本思想4.2 排序实现 5.快排5.1 基本思想5.2 递归实现快排5.3 快排优化5.4 双指针法完成快排5.5 快排的非递归 6.归并排序6.1 基本思想6.2 排序的实现6.3 归并排序的非递归 7. 计数排序7.1 基本思想7.2 排序实现7.3 排序的优缺点 8.排序总结 4.选择排序…

C++初阶教程——C++入门

一、本章主要内容 C在C的基础之上&#xff0c;加入了面向对象编程的思想&#xff0c;并增加了许多有用的库以及编程范式。可以说&#xff0c;C是C的子集。在这章的内容中&#xff0c;笔者将会为诸位读者讲C如何补充C语言的一些不足。比如&#xff1a;作用域、IO、函数、指针等。…

【Golang】Go语言中如何进行包管理

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

JetBrains IDE中GPU进程(JCEF)重启问题(Too many restarts of GPU-process)解决方案

目录 前言1. GPU进程重启问题概述1.1 什么是GPU进程重启问题&#xff1f;1.2 该问题带来的影响 2. GPU进程重启问题的原因分析2.1 显卡驱动的兼容性问题2.2 系统资源的限制2.3 JCEF组件的设置不合理 3. 解决方案3.1 方法一&#xff1a;通过自定义属性禁用GPU加速3.2 方法二&…

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速 2024/10/28 18:17 荣品PRO-RK3566开发板作为服务器端&#xff1a; 笔记本电脑作为客户端。 接公司的网络。 在笔记本电脑的ubuntu20.04下&#xff0c;通过nethogs实测iperf3的发送速度大概是10MB…

410wifi的正确利用之路——debian 11

装上openwrtadguard太卡了&#xff0c;10min自启一次&#xff0c;当无线网卡都费劲。 网桥、USB千万网段要和主网独立 wifi连接激活后再改静态ip 高通410 修复debian 11的环境 1 换debian11源 &#xff08;1&#xff09;切换为国内的软件源&#xff08;可以加快软件更新时的…

压力测试Monkey命令参数和报告分析!

adb的操作命令格式一般为&#xff1a;adb shell monkey 命令参数 PART 01 常用参数 ⏩ -p <测试的包名列表> 用于约束限制&#xff0c;用此参数指定一个或多个包。指定包之后&#xff0c;Monkey将只允许系统启动指定的APP。如果不指定包&#xff0c;Monkey将允许系统…

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测 目录 SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现SSA-CNN-LSTM-MATT麻雀算法优化卷积神经网络-长短期记忆神经网络融合多头注意力机制多特征分类预测&…

GPU 服务器厂家:中国加速计算服务器市场的前瞻洞察

科技的飞速发展&#xff0c;让 GPU 服务器在加速计算服务器领域的地位愈发凸显。中国加速计算服务器市场正展现出蓬勃的生机&#xff0c;而 GPU 服务器厂家则是这场科技盛宴中的关键角色。 从市场预测的趋势来看&#xff0c;2023 年起&#xff0c;中国加速计算服务器市场便已展…