【Vue】学习笔记-基本路由 多级路由

news2025/10/31 19:37:18

相关理解

vue-router 的理解

  • vue的一个插件库，专门用来实现SPA应用

对SPA应用的理解

  1. 单页web应用(single page web application ,SPA)
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取
    在这里插入图片描述

路由的理解

  1. 什么是路由？
    a.一个路由就是一组映射关系(key-value)
    b.key为路径,value可能是function或component
  2. 路由的分类
    a.后端路由
    i.理解：value是function,用于处理客户端提交的请求
    ii.工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    b.前端路由
    i.立即：value是component，用于展示页面的内容
    ii.工作过程：当浏览器的路径改变时，对应的组件就会显示

基本路由

1.安装vue-router,命令npm i vue-router
2.应用插件`Vue.use(VueRouter)
3.编写router配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})
  1. 实现切换
    <rounter-link></router-link> 浏览器会被替换为a标签
    active-class 可配置高亮样式
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  1. 指定展示位<router-view></router-view>

在这里插入图片描述
src/router/index.js 该文件专门用于创建整个应用的路由器

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

src/main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

src/App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					<!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

src/components/Home.vue

<template>
	<h2>我是Home的内容</h2>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

src/components/About.vue

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About'
	}
</script>

几个注意事项

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹比如上一节的案例就可以修改为
    src/pages/Home.vue
    src/pages/About.vue
    src/router/index.js
    src/components/Banner.vue
    src/App.vue
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  3. 每个组件都有自己的$router属性获取到
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

多级路由

  1. 配置路由规则，使用children配置项
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]

2.跳转(要写完整路径)

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

在这里插入图片描述
src/pages/Home.vue

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
	}
</script>

src/pages/News.vue

<template>
	<ul>
		<li>news001</li>
		<li>news002</li>
		<li>news003</li>
	</ul>
</template>

<script>
	export default {
		name:'News'
	}
</script>

src/pages/Message.vue

<template>
	<div>
		<ul>
			<li>
				<a href="/message1">message001</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message2">message002</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message/3">message003</a>&nbsp;&nbsp;
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Message'
	}
</script>

src/router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

头歌人工智能学习记录

头歌人工智能学习记录

因为这个实训的顺序不同&#xff0c;所以这里的顺序是个人学习的顺序&#xff0c;可能有些变动 第1关&#xff1a;Sigmoid函数 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 激活函数概述&#xff1b; 线性函数&#xff1b; Sigmoid 函数。 激活函数概述 …
阅读更多...
HTTPS协议原理

HTTPS协议原理

目录 HTTPS是什么 1. 什么是"加密" 2. 为什么要加密 3. 常⻅的加密⽅式 对称加密 ⾮对称加密 4. 数据摘要&&数据指纹 5. 数字签名 HTTPS的⼯作过程 ⽅案1- 只使⽤对称加密 ⽅案2 - 只使⽤⾮对称加密 ⽅案3 - 双⽅都使⽤⾮对称加密 ⽅案4 - ⾮对…
阅读更多...
2023年学自动化测试？Python 还是 Java？“我“上车了...

2023年学自动化测试？Python 还是 Java？“我“上车了...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 自动化测试&#…
阅读更多...
2023年牛客网最新的Java面试经历整理(一次性查缺补漏个够)

2023年牛客网最新的Java面试经历整理(一次性查缺补漏个够)

学的人越多&#xff0c;越容易供大于求&#xff0c;越容易卷&#xff0c;要求越高&#xff01; 当前 Java 程序员的群体比较庞大&#xff0c;Java 本身语言是全场景编程语言&#xff0c;所以不少大厂都要求 Java 程序员具有全栈开发能力和多场景开发能力&#xff0c;还有就是 …
阅读更多...
Sui主网上线后的生态发展

Sui主网上线后的生态发展

Sui主网上线一个月有余&#xff0c;这段时间&#xff0c;Sui网络进行多次迭代更新&#xff0c;生态正在不断稳步发展&#xff0c;社区也日益焕发出生机和活力。为吸引更多的项目或开发者前来构建&#xff0c;Sui基金会推出了多项资助计划以及黑客松&#xff0c;进一步助力生态持…
阅读更多...
【高级篇】多级缓存

【高级篇】多级缓存

文章目录 多级缓存1.什么是多级缓存2.JVM进程缓存2.1.导入案例案例导入说明1.安装MySQL1.1.准备目录1.2.运行命令1.3.修改配置1.4.重启 2.导入SQL3.导入Demo工程3.1.分页查询商品3.2.新增商品3.3.修改商品3.4.修改库存3.5.删除商品3.6.根据id查询商品3.7.根据id查询库存3.8.启动…
阅读更多...
动态规划-背包问题（二）

动态规划-背包问题（二）

动态规划-背包问题&#xff08;二&#xff09; 1 描述2 样例2.1 样例 1&#xff1a;2.2 样例 2&#xff1a;2.3 挑战 3 算法解题思路以及实现方法3.1 算法解题思路3.1.1 确定状态3.1.2 转移方程3.1.3 初始条件和边界情况3.1.4 计算顺序 3.2 空间复杂度为O(MN)的算法实现3.2.1 j…
阅读更多...
卡尔曼滤波与组合导航原理（十一）区间平滑：前向滤波、反向滤波、双向区间平滑、RTS平滑

卡尔曼滤波与组合导航原理（十一）区间平滑：前向滤波、反向滤波、双向区间平滑、RTS平滑

最优预测、估计与平滑之间的关系&#xff1a; 三种平滑方式&#xff1a; 函数模型和随机模型 { X k Φ k / k − 1 X k − 1 Γ k − 1 W k − 1 Z k H k X k V k { E [ W k ] 0 , E [ W k W j T ] Q k δ k j E [ V k ] 0 , E [ V k V j T ] R k δ k j E [ W k V j …
阅读更多...
Kubernetes DashBoard

Kubernetes DashBoard

Kubernetes DashBoard 为了便于用户操作&#xff0c;k8s开发了基于Web的用户界面。方便用户容器化应用&#xff0c;还可以监控应用状态&#xff0c;执行故障排除和管理资源。 &#x1f4ca;部署DashBoard 下载yaml&#xff0c;运行DashBoard #下载yaml [rootmaster ~]# wget …
阅读更多...
chatgpt赋能python：Python图片裁剪：让您的图片变得更完美

chatgpt赋能python：Python图片裁剪：让您的图片变得更完美

Python 图片裁剪&#xff1a;让您的图片变得更完美 无论您是一名摄影师、设计师、或是一名开发者&#xff0c;一张完美的图片是至关重要的。然而&#xff0c;有时候您拍摄的图片或者设计的图形可能有一些缺陷&#xff0c;例如画面不够清晰、不需要的元素等等&#xff0c;这时候…
阅读更多...
数据结构与算法·第7章【图】

数据结构与算法·第7章【图】

图 大部分定义都在离散数学II中学过了&#xff0c;所以对于已知或常见的我不多赘述 弧或边带权的图分别称作有向网或无向网。若边或弧的个数 e<nlogn&#xff0c;则称作稀疏图&#xff0c;否则称作稠密图。对有向图&#xff0c;若任意两个顶点之间都存在一条有向路径&…
阅读更多...
【深蓝学院】手写VIO第3章--基于优化的 IMU 与视觉信息融合--笔记

【深蓝学院】手写VIO第3章--基于优化的 IMU 与视觉信息融合--笔记

0. 内容 1. 基于BA的VIO融合 优化的方法学会之后&#xff0c;滤波的方法也就会了。 具体的求解BA问题参考的是SBA的论文&#xff0c;使用的是LM算法&#xff08;里面有个关于权重μ的计算方法&#xff0c;不同人的实现可能不一样&#xff0c;这些都是实现细节&#xff09; …
阅读更多...
全新 FinClip Studio 现已上线

全新 FinClip Studio 现已上线

FinClip IDE &#xff08;FinClip Integrated Development Environment&#xff0c;简称为 FIDE&#xff09;是面向开发者推出的「小程序桌面端集成开发环境」。自 2021 年起就一直陪伴来自不同平台的小程序开发者完成小程序开发、调试、预览、上传等各类功能。 随着 FinClip …
阅读更多...
【MySQL】初识数据库

【MySQL】初识数据库

数据库基础知识 一、什么是数据库二、mysql与mysqld三、服务器、数据库、表关系四、数据库的连接、创建与使用4.1 安装地址4.2 连接服务器4.3 数据库的基本使用4.4 数据逻辑存储 五、MySQL架构六、SQL分类七、存储引擎 一、什么是数据库 存储数据用文件就可以了&#xff0c;为…
阅读更多...
一文即可了解！Web测试（性能测试 / 界面测试 / 兼容性测试 / 安全性测试）

一文即可了解！Web测试（性能测试 / 界面测试 / 兼容性测试 / 安全性测试）

目录 前言&#xff1a; 一、Web性能测试&#xff1a;&#xff08;压力测试、负载测试、连接速度测试&#xff09; 二、Web界面测试&#xff1a;&#xff08;导航测试、图形测试、内容测试、整体界面测试&#xff09; 三、Web兼容性测试&#xff1a;&#xff08;平台&#x…
阅读更多...
Linux搭建Java环境——安装MySQL5.7(CentOS7.6)

Linux搭建Java环境——安装MySQL5.7(CentOS7.6)

一、使用Xftp上传MySQL安装包&#xff0c;并解压 这里可以直接使用安装包也可以使用命令直接在Xshell运行 wget http://dev.mysql.com/get/mysql-5.7.26-1.el7.x86_64.rpm-bundle.tar 当然要提前创建好文件夹/opt/mysql&#xff0c;并cd进去&#xff0c;运行tar -xvf mysql-…
阅读更多...
通义千问写的高考作文你觉得怎么样？

通义千问写的高考作文你觉得怎么样？

目录 一、全国卷-全国甲卷 二、北京卷 三、上海卷 今天带大家使用通义千问来体验一下2023年高考作文&#xff0c;大家一起来一睹为快吧&#xff01; 一、全国卷-全国甲卷 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xff09; 人们因技术发展得以更好地掌控…
阅读更多...
计算机网络管理-使用SNMPc开展网管活动

计算机网络管理-使用SNMPc开展网管活动

一、实验目的 全面学习SNMPc网络管理软件业务服务监控功能&#xff0c;了解如何使用网管软件从事网络管理工作 二、实验内容与设计思想 1&#xff09;操作映射数据库。 2&#xff09;查看管理对象的MIB数据。 3&#xff09;创建、保存长期统计数据&#xff08;要求一定时长…
阅读更多...
django传统全栈开发一个ChatGPT应用

django传统全栈开发一个ChatGPT应用

根据客户需求&#xff0c;开发一个能多人使用的ChatGPT平台&#xff0c;背后使用的是ChatGPT的api_key。 需求 1、可多轮对话 2、可删除对话 3、流式显示对话 4、可多人使用 5、多个api_key均衡使用 技术分析 第一次接触openai的二次开发&#xff0c;看文档、看文章&…
阅读更多...
软件测试-金融银行项目怎么测？系统业务测试总结分析...

软件测试-金融银行项目怎么测？系统业务测试总结分析...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行测试人员的组…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023