No.66 Vue---Vue引入路由配置、路由传递参数、嵌套路由配置

news/2025/3/17 10:06:03/文章来源:https://www.cnblogs.com/bltstop/p/18772327

一、Vue引入路由配置

  • 在Vue中,我们可以通过 vue-router 路由管理页面之间的关系
  • Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举.

1.1 在vue中引入路由

第一步:安装路由

  • npm install -save vue-router

第二步:配置独立的路由文件

  • 启动项目服务:npm run serve
  • src文件夹下创建router文件夹,创建index.js文件

 第三步:src文件夹下创建views文件夹,创建两个页面

分别写入:

 

第四步:在第二步中的index.js文件中,写入代码

import { createRouter,createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";//创建路由
//配置信息中需要页面的相关配置const routes = [{path:"/",component:HomeView},{path:"/about",component:AboutView}
]const router = createRouter({
    history:createWebHashHistory(),routes
})export default router;

  

 第五步:在main.js文件中import

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

createApp(App).use(router).mount('#app')

 

第六步:   App.vue 中

<template><img alt="Vue logo" src="./assets/1.png"><HelloWorld msg="歡迎來到我的個人主頁"/>
  <router-link to="/">首頁</router-link><router-link to="/about">關於</router-link><router-view></router-view></template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</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>

效果:

 二、路由传递参数

 

三、嵌套路由配置

使用情景:导航下面有子导航。

1.首先,重新创建一个项目

这次选择Router:(会直接生成路由相关的文件)

 如图:

 2. 进入项目文件,启动服务

 3.给关于下面再搞两个子导航

4. 简单写点内容

 

 5.在index.js 文件中配置

 

 6.在AboutView.vue中链接一下

 

7.显示

 

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

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

相关文章

开源!Django-Vue3-Admin的Python后台管理系统

DjangoAdmin 是一个基于 Django + Vue3 的前后端分离的后台管理系统,采用了最新的前后端技术栈,内置了丰富的功能模块,可以帮助开发者快速搭建企业级中后台产品。Django-Vue3-Admin 项目简介 Django-Vue3-Admin 是一个基于 Django + Vue3 的前后端分离的后台管理系统,采用了…

陕西人文:1964年陕西14座古县因何纷纷“改县名”?

2016年11月西安市户县撤县设区,改名鄠邑区。其中有一节简介:”1964年“鄠县”改名“户县”,实际上在同一时期改名的还有:盩厔,邠县,醴泉,栒邑,汧阳,郿县,郃阳,雒南,商雒、洵阳,沔县,鄜县,葭县,这13个古县。 【户县老县城】鄠县(hu xian)就是现在之西安市鄠邑区…

在鸿蒙NEXT中实现完全自定义导航栏

在日常app开发中,导航栏扮演着重要的角色。鸿蒙提供了系统导航栏Navigation,它支持很多属性的修改,但是应用需求更加灵活多变,比如有的导航栏有背景图片,有的导航栏要求渐变色,有的导航栏需要随时隐藏和显示等等。 遇到这些需求系统的Navigation就无法实现,这时候我们就需…

鸿蒙开发中console.log和hilog的区别

在日常开发中打印日志是调试程序非常常用的操作,在鸿蒙的官方文档中介绍了hilog这种方式,有些前端转过来的友友发现console.log也可以进行日志打印。有一段时候幽蓝君也非常喜欢使用console.log,因为它看起来好像更加简单方便。 那么今天幽蓝君就来和大家说一说console.log和…

HarmonyOS NEXT开发实战教程--招聘app

这一周忙到起飞,只能在周末发个文章。今天的内容比较简单,是一个招聘app,适合新手友友参考,大佬们可以直接忽略。 看一下效果图:这是一个比较常见的应用,大家做这类应用建议大家先分析一下应用和页面的结构,避免写完发现错了又改。 这个应用首先有4个tabbaritem,是很常…

解决vscode XHR failed

问题:主要流程: 获取自己的COMMIT_ID(就是一串数字,每个人的不一样) 下载vscode-server-linux-x64.tar.gz文件 解压vscode-server-linux-x64.tar.gz,移动解压后的所有文件到~/.vscode-server/bin/COMMIT_ID目录获取COMMIT_ID cd ~/.vscode-server/bin && ls # 那串数字…

下载神器!支持视频号、抖音等多平台资源下载!

res-downloader —— 一款基于 Go + Wails + Vue 实现的,支持下载视频、音频、图片、m3u8、直播流等常见网络资源的软件工具。大家好,我是 Java陈序员。 今天,给大家介绍一款支持视频号、抖音等多平台资源下载的开源软件,开箱即用!关注微信公众号:【Java陈序员】,获取开…

零经验选手,Compose 一天开发一款小游戏!

什么,Compose 也能做游戏?!不会 Unity 没关系!游戏开发零经验选手手把手带你飞,一天写出一个4399小游戏!是兄弟就一起来!猛男翻卡牌 猛男启动 继上一个 Compose 练习项目 SimpleTodo 之后,又尝试用 Compose 来做了一个翻牌记忆游戏【猛男翻卡牌】。这次是零经验写游戏项…

ftp替代品,如何提升数据交换的安全性与高效性?

文件传输协议(FTP)是一个跨平台的、简单且易于实现的协议,用于在网络上的服务器和客户端之间传输文件,也是企业会经常选择的一种传输方式。 业务场景一: 基于信息相关安全要求,医院会采用防火墙、网闸等将网络隔离为内网和外网,但网络隔离后,医院仍存在将报告资料等文…

【分享】常见的几种数据摆渡系统介绍

随着企业数字化转型的逐步深入,企业投入了大量资源进行信息系统建设,信息化程度日益提升。在这一过程中,企业也越来越重视核心数据资产的保护,数据资产的安全防护成为企业面临的重大挑战。 一、网络隔离实施的背景 1、互联网的广泛应用:随着互联网的飞速发展,企业与外部的…

010 Element-Plus集成

React+AntDesign+MUI Vue3+VantUI UI组件库(框架)->封装通用组件->后台管理系统=>element(UI(vue2)/Plus(vue3))=>饿了么团队(阿里)=>Vue AntDesignUI=>蚂蚁金服=>React框架 AntDesignVue=>Vue框架一、Element Plus UI组件库 Element Plus 基于Vue3、…

『Plotly实战指南』--折线图绘制基础篇

在数据分析的世界中,折线图是一种不可或缺的可视化工具。 它能够清晰地展示数据随时间或其他变量的变化趋势,帮助我们快速发现数据中的模式、趋势和异常。 无论是金融市场分析、气象数据监测,还是业务增长趋势预测,折线图都能以直观的方式呈现关键信息。 本文将从基础开始,…