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),来减少大模型的显存占用,从…

Qt元对象系统 —— 信号与槽

信号与槽讨论的是Qt对象之间的连接与交互。我们就是使用这种方式实现了一个简单的异步调用。换而言之&#xff0c;信号与槽让我们可以不必考虑复杂的调用。只需要当我们需要在程序中表达&#xff1a;“希望在程序中通知一个事件而且按照我们设定的方式给出回应”的时候&#xf…

基于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…

Vscode中Github Copilot无法使用

现象 Copilot侧边栏显示要登录&#xff0c;但是点击"github登录"没有反应与Copilot对话&#xff0c;报错如下&#xff1a; Unexpected token o, "[object Rea"... is not valid JSON解决方案 在网上怎么找都没找到类似的问题&#xff0c;最后发现是Vsco…

MAC电脑的ifconfig输出

在Mac电脑上执行ifconfig后&#xff0c;输出如下&#xff0c;每个人的电脑会有差异 lo0: flags8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384options1203<RXCSUM,TXCSUM,TXSTATUS,SW_TIMESTAMP>inet 127.0.0.1 netmask 0xff000000inet6 ::1 prefixlen 128inet6 …

云原生笔记

#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…

resttemplate设置支持content-type multipart/form-data; boundary=<calculated w

在使用 Spring 的 RestTemplate 来发送 multipart/form-data 请求时&#xff0c;特别是当你需要手动设置 Content-Type 边界&#xff08;boundary&#xff09;时&#xff0c;有一些特定的步骤需要遵循。通常&#xff0c;当使用 MultipartResolver 或类似的机制时&#xff0c;Sp…

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;…

Django-cookie,session

Cookie简介 Cookie&#xff0c;有时也用Cookies&#xff0c;是指web程序为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据&#xff08;通常经过加密&#xff09;&#xff0c;一般是以键值对的形式存在&#xff0c;Cookie具有不可跨域名性 Cookie是http协议中…

智能工厂的设计软件 谓述词(遗传/继承)的前述谓经验: 认知系统架构和灵活模块化框架的实现原理 之1

&#xff08;备忘 1)三组词&#xff1a;先天的和先验的&#xff0c;天生的和本能的&#xff0c;遗传的/继承的 以及三种“学习”&#xff1a;经验学习/数据学习和知识学习。 --本文中提到的“实践常识” 不直接 属于“学习”需要进一步澄清&#xff09; Q1、考虑一个问题&a…

【ARM 嵌入式 编译系列 10.4.1 -- ELF 文件结构详细介绍】

文章目录 ARM GCC ELF 文件结构详细介绍1. ELF 文件概述2. ELF 文件结构2.1 ELF 头部(ELF Header)2.2 ELF 数据(ELF Data)2.2.1 程序头表(Program Headers)2.2.2 节头表(Section Headers)2.2.3 实际数据(Data)3. 示例和工具3.1 详细解释4. Program Headers 概述4.1 .…

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、函数、指针等。…