初学Vue——Vue路由

0 什么是Vue路由

类似于Html中的超链接(<a>)一样,可以跳转页面的一种方式。

前端路由:URL中hash(#号之后的内容)与组件之间的对应关系,如下图:

 当我们点击左侧导航栏时,浏览器的地址栏会发生变化,路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router,其主要组成如下:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

  • <router-link>:请求链接组件,浏览器会解析成<a>

  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

其工作原理如下:

 

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击,发出路由请求;

接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

最后VueRouter会切换<router-view>中的组件,从而进行视图的更新

1 路由入门

1.1 安装vue-router插件,在当前Vue目录下的命令行中输入:

npm install vue-router

1.2 然后需要在src/router/index.js文件中定义路由表,根据提供的模板代码进行修改,最终代码如下:

import Vue  'vue'
import VueRouter  'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

注意:去掉没有引用的import模块

在main.js中,我们已经引入了router功能,如下图所示:

 1.3 路由基本信息配置好了,路由表已经被加载,此时我们还缺少2个东西,就是<router-lin>和<router-view>,所以我们需要修改2个页面(EmpView.vue和DeptView.vue)我们左侧栏的2个按钮为router-link,其代码如下:

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
</el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view,作为组件的切换,其App.vue的完整代码如下:

<template>
  <div id="app">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

但是我们浏览器打开地址: http://localhost:7000/ ,发现一片空白,因为我们默认的路由路径是/,但是路由配置中没有对应的关系,

1.4 所以我们需要在路由配置中/对应的路由组件,代码如下:

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  },
]

此时我们打开浏览器,访问http://localhost:7000 发现直接访问的是emp的页面,并且能够进行切换了,其具体如下图所示:

到此我们的路由实现成功。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

hutool,真香!

大家好&#xff0c;我是苏三&#xff0c;又跟大家见面了。 前言 今天给大家介绍一个能够帮助大家提升开发效率的开源工具包&#xff1a;hutool。 Hutool是一个小而全的Java工具类库&#xff0c;通过静态方法封装&#xff0c;降低相关API的学习成本&#xff0c;提高工作效率&…

IOT的发展历程及其优势——青创智通

工业互联网-物联网-设备改造-IOT-青创智通 ​随着科技的不断发展&#xff0c;物联网&#xff08;IoT&#xff09;已经逐渐成为了我们生活中不可或缺的一部分。IoT是指通过互联网将各种物理设备连接起来&#xff0c;实现设备之间的数据交换和智能化控制。IoT的发展不仅改变了我们…

四管齐下 共建发展 | 七巧低代码助力零售行业打造一体化协同解决方案

行业背景 随着互联网和移动技术的普及&#xff0c;零售行业的销售渠道日趋多元化和融合化&#xff0c;传统线下渠道和新兴线上渠道相互竞争和协作&#xff0c;形成了新零售和全渠道的格局。快消品新零售模式下&#xff0c;企业需要通过数字化和智能化的手段&#xff0c;实现对…

Flask python 开发篇:项目布局

一、背景简介 Flask应用程序可以像单个文件一样简单。就像上一篇简单实现一个接口一样&#xff0c;所有的东西都在一个python文件内&#xff1b; 然而&#xff0c;当项目越来越大的时候&#xff0c;把所有代码放在单个文件中就有点不堪重负了。 Python 项目使用 包 来管理代码…

携手亚信安慧AntDB,在数智化浪潮中乘风破浪

随着大数据时代的到来&#xff0c;对数据库的需求愈发强烈。在这一背景下&#xff0c;国产数据库逐渐崭露头角&#xff0c;亚信安慧AntDB作为重要的代表产品之一正积极参与到激烈的市场竞争中。亚信安慧AntDB不仅追求技术的革新和突破&#xff0c;同时也致力于满足用户日益增长…

【Python】conda 命令报错解决:Example: conda --no-plugins install <package>

目录 报错效果&#xff1a;解决方法总结 欢迎关注 『Python』 系列&#xff0c;持续更新中 欢迎关注 『Python』 系列&#xff0c;持续更新中 报错效果&#xff1a; An unexpected error has occurred. Conda has prepared the above report. If you suspect this error is bei…

OD_2024_C卷_200分_9、园区参观路径【JAVA】【动态规划】

package odjava;import java.util.Scanner;public class 九_园区参观路径 {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt(); // 长 -> 行数int m sc.nextInt(); // 宽 -> 列数int[][] matrix new int[n][m]; // 地图…

HAproxy反向代理与负载均衡

目录 一、HAproxy介绍 1. 概述 2. 关于4/7层负载均衡 2.1 无负载均衡 2.1.1 图示 2.1.2 说明 2.2 四层负载均衡 2.2.1 图示 2.2.2 说明 2.3 七层负载 2.3.1 图示 2.3.2 说明 3. 特性 4. HAProxy负载均衡常见策略 5. 处理模式 二、HAproxy安装 1. yum安装 2. 第…

算法---双指针练习-7(三数之和)

三数之和 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;三数之和 2. 讲解算法原理 首先对输入的数组进行排序&#xff0c;以便后续使用双指针法。初始化一个空的二维向量 ret&#xff0c;用于存储结果。使用一个循环遍历数组中的每个元素&#xff…

Spark性能优化指南——高级篇

调优概述 有的时候&#xff0c;我们可能会遇到大数据计算中一个最棘手的问题——数据倾斜&#xff0c;此时Spark作业的性能会比期望差很多。数据倾斜调优&#xff0c;就是使用各种技术方案解决不同类型的数据倾斜问题&#xff0c;以保证Spark作业的性能。 数据倾斜发生时的现…

【Idea】八种Debug模式介绍

1.行断点 在对应的代码行左侧边栏点击鼠标左键&#xff0c;会出现一个红色圆圈&#xff0c;以debug模式执行时当代码运行到此处则会停止&#xff0c;并可以查询相关上下文参数 2.方法断点 在方法左侧点击创建断点,在方法进入时会停止&#xff0c;同时可以右键断点&#xff0c;…

Jenkins Pipeline实现Golang项目的CI/CD

Jenkins Pipeline实现Golang项目的CI/CD 背景 最近新增了一个Golang实现的项目&#xff0c;需要接入到现有的流水线架构中。 流程图 这边流程和之前我写过的一篇《基于Jenkins实现的CI/CD方案》差不多&#xff0c;不一样的是构建现在是手动触发的&#xff0c;没有配置webho…

在 Python 中从键盘读取用户输入

文章目录 如何在 Python 中从键盘读取用户输入input 函数使用input读取键盘输入使用input读取特定类型的数据处理错误从用户输入中读取多个值 getpass 模块使用 PyInputPlus 自动执行用户输入评估总结 如何在 Python 中从键盘读取用户输入 原文《How to Read User Input From t…

Elixir and Pylons 中多态继承和自关联关系的创建

我们知道&#xff0c;在Elixir和Pylons中&#xff0c;多态继承和自关联关系是两个独立的概念&#xff0c;分别用于处理不同的情况。而在Pylons中&#xff0c;多态继承通常由SQLAlchemy提供的 polymorphic 关系来实现。下面分别介绍在Elixir和Pylons中如何创建多态继承和自关联关…

vue之性能优化

1.路由懒加载 所谓路由懒加载&#xff0c;其实就是路由通过import动态引入&#xff0c;而不是在文件最上面一个个全部引入&#xff0c;因为JS执行的时候会优先执行引入的文件&#xff0c;如果一次性引入过多&#xff0c;则会增加处理时长。 2.图片懒加载 图片在网页加载过程…

从零搭建React18.2+ReactRoute6.22+TS5+RTK2.2搭配antd5+antd-style书写All in Js完整体验项目规范

1. 使用CRA创建项目 全局设置npm淘宝镜像源 npm config set registry https://registry.npmmirror.com -g使用最新版create-react-app初始化项目结构 npx create-react-app custom-template --template typescript初始化项目之后在package.json文件中配置使用node>18.0.0…

路径总和00

题目链接 路径总和 题目描述 注意点 树中节点的数目在范围 [0, 5000] 内-1000 < Node.val < 1000 解答思路 要判断是否有一条从根节点开始到叶子节点节点总和为targetSum的路径&#xff0c;首先想到使用深度优先遍历&#xff0c;不断递归找到叶子节点且保存该路径的…

Aigtek电压放大器设计流程是什么样的

电压放大器是电子电路中常见的一种模块&#xff0c;用于放大输入信号的电压幅值。在实际设计过程中&#xff0c;需要考虑多个因素&#xff0c;包括放大器的增益、带宽、稳定性和功耗等。下面将介绍电压放大器设计的一般流程。 确定需求&#xff1a;首先需要明确设计的目标和需求…

CrossOver2024实现Mac/Linux上快速运行Win软件和游戏

作为软件产品专家&#xff0c;我对各类软件都有较为深入的了解&#xff0c;下面介绍CrossOver2024这款软件的功能特点。 CrossOver2024是一款功能强大的类虚拟机软件&#xff0c;它的设计目标是在Mac和Linux系统上实现Windows软件和游戏的快速运行。这款软件不仅具有出色的兼容…

Spark Core

Spark Core 一、Spark RDD RDD概述 1.RDD基础 2.RDD源代码描述 3.RDD特性 4.Spark宽窄依赖 RDD创建 在驱动器中创建RDD 1.parallelize 读取外部数据集创建RDD 2.textFile RDD操作 缓存rdd到内存 1.RDD转化操作 2.常见的转化操作 3.RDD行动操作 4.常见的行动操作 Spark…