WEB前端15-Router路由

news2024/11/23 21:19:44

Vue2-router路由

在使用Vue.js构建现代单页面应用程序（SPA）时，路由管理是至关重要的一部分。Vue Router 是 Vue.js 官方的路由管理器，它允许你在应用程序中实现基于组件的页面导航。本文将介绍Vue Router的基本概念和用法，帮助你快速上手Vue.js的路由管理。

什么是路由？

路由在Web开发中指的是确定用户在页面之间导航的机制。在传统的多页面应用中，每次点击链接时浏览器都会向服务器请求一个新的页面。而在单页面应用（SPA）中，所有的页面加载和切换都是在客户端完成的，页面内容通过JavaScript动态更新，而不会重新请求整个页面。

Vue Router 是 Vue.js 官方提供的路由管理器。它和Vue.js核心深度集成，允许你通过简单的配置，将组件映射到路由，然后在应用中进行导航。

安装和基本用法

安装Vue Router：

npm install vue-router
1.配置路由
  • 编写路由核心js文件(静态路由配置)

image-20240801113220940

//静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
import Vue from 'vue'
import VueRouter from 'vue-router'
import View1 from '@/views/1.vue'
import View2 from '@/views/2.vue'
import View3 from '@/views/3.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    component: View1
  },
  {
    path: "/login",
    component: View2
  },
  {
    path: "/404",
    component: View3
  }
]

const router = new VueRouter({
  routes
})

export default router
  • 编写路由核心js文件(动态路由配置)
//动态导入是将组件的 js 代码放入独立的文件，用到时才加载
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    component: () => import('@/views/2.vue')
  },
  {
    path: "/login",
    component: () => import('@/views/1.vue')
  },
  {
    path: "/404",
    component: () => import('@/views/3.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router
  • main.js引入路由

image-20240802093851150

  • 在根组件中显示路由
<template>
    <div class="all">
        <router-view></router-view>
    </div>
</template>

其中 <router-view> 起到占位作用，改变路径后，这个路径对应的视图组件就会占据 <router-view> 的位置，替换掉它之前的内容

2.嵌套路由

嵌套路由是指在一个页面路由中包含另一个页面路由的技术。这种技术允许我们在一个父路由内部定义子路由，这些子路由可以在父路由对应的组件中显示，从而形成页面的层级结构。这种层级结构对于复杂的应用程序特别有用，它能够帮助我们模块化地管理和组织页面内容。

  • 通过children属性指定要嵌套的路由：

children属性是一个数组，里面存放要映射的对象

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

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    component: () => import('@/views/2.vue'),
    redirect: "/c/p1",
    children: [
      {
        path: "c/p1",
        component: () => import('@/views/p1.vue')
      },
      {
        path: "c/p2",
        component: () => import('@/views/p2.vue')
      },
      {
        path: "c/p3",
        component: () => import('@/views/p3.vue')
      },
    ]
  },
  {
    path: "/login",
    component: () => import('@/views/1.vue')
  },
  {
    path: "/404",
    component: () => import('@/views/3.vue')
  },
  {
    path: "*",
    redirect: "/404"
  }
]

const router = new VueRouter({
  routes
})

export default router
  • 通过<router-view>标签进行路由的展示
<template>
    <div>
        <router-view></router-view>
    </div>
</template>
3.路由跳转
  • 路由重定向

同JavaWeb中的重定向相似，以新路径请求path资源

{
	path: "*",
    redirect: "/404"
}
  • <router-link>标签实现跳转

相当于超链接进行资源的跳转，通过to属性指定要跳转的资源路径

<router-link class="router-link" to="/c/p1">P1</router-link>

<router-link class="router-link" to="/c/p2">P2</router-link>

<router-link class="router-link" to="/c/p3">P3</router-link>
  • 路由对象通过push()方法实现跳转

通过获取路由对象，调用push方法将要跳转的资源路径进行传达，实现资源跳转

const options = {
  methods: {
    jump(url) {
      this.$router.push(url);
    }
  },
};
  • 路由结合Element UI菜单导航

通过router和index属性，可以实现菜单导航的跳转

<el-aside width="200px">
  <el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-submenu>
      <span slot="title">
        <i class="el-icon-user-solid"></i>
        菜单一
      </span>
      <el-menu-item index="/c/p1">子项1</el-menu-item>
      <el-menu-item index="/c/p2">子项2</el-menu-item>
      <el-menu-item index="/c/p3">子项3</el-menu-item>
    </el-submenu>
    <el-menu-item>
      <span slot="title">
        <i class="el-icon-picture"></i>
        菜单二
      </span>
    </el-menu-item>
    <el-menu-item>
      <span slot="title">
        <i class="el-icon-s-platform"></i>
        菜单三
      </span>
    </el-menu-item>
  </el-menu>
</el-aside>
4.动态路由

动态路由是指根据不同的参数加载不同的路由内容。在Vue Router中，动态路由通常通过在路由路径中使用参数来实现。下面以不同用户身份返回不同的目录访问权限，动态加载路由

  • 前端登录环境准备
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: "c",
    component: () => import('@/views/2.vue'),    
  },
  {
    path: "/login",
    component: () => import('@/views/1.vue')
  },
  {
    path: "/404",
    component: () => import('@/views/3.vue')
  },
  {
    path: "*",
    redirect: "/404"
  }
]

const router = new VueRouter({
  routes
})

export default router

<template>
  <div class="login">
    <h1>登录页面</h1>
    <el-input v-model="username" placeholder="请输入用户名" size="mini"></el-input>
    <el-button type="primary" size="mini" @click="login">登录</el-button>
  </div>
</template>

<script>
import axios from "axios";

const options = {
  data() {
    return {
      username:""
    }
  },
  methods: {
    async login() {
      const response = await axios.get(`/api/login?username=${this.username}`);
      console.log(response.data)
    }
  },
};

export default options;
</script>

<style scoped>
.login {
  text-align: center;
  background: greenyellow;
  width: auto;
  height: 100vh;
}

.el-input {
  width: 200px;
  margin-right: 20px;
}
</style>
  • 后端SQL解释

image-20240802172715382

  • 添加动态路由
<template>
  <div class="login">
    <h1>登录页面</h1>
    <el-input
      v-model="username"
      placeholder="请输入用户名"
      size="mini"
    ></el-input>
    <el-button type="primary" size="mini" @click="login">登录</el-button>
  </div>
</template>

<script>
import axios from "axios";
const options = {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    async login() {
      const response = await axios.get(`/api/login?username=${this.username}`);
      const array = response.data;
      //addRoutes() 参数1：父路由对象名字  参数2：路由对象
      for (const { id, path, component } of array) {
        if (component !== null) {
          this.$router.addRoutes("c", {
            path: path,
            name: id,
            component: () => import(`@/views/${component}`),
          });
        }
      }
    },
  },
};

export default options;
</script>

<style scoped>
.login {
  text-align: center;
  background: greenyellow;
  width: auto;
  height: 100vh;
}

.el-input {
  width: 200px;
  margin-right: 20px;
}
</style>

image-20240802174109531

  • 重置路由

原因：因为每次在动态加载路由的时候只是简单的对路由叠加，这就达不到对路由的动态控制，因此在每次动态添加路由时要重置路由对象，在之前的基础上添加路由，这样才可以达到不同用户权限获得不同的路由权限

//在main.js中添加如下代码
export function resetRouter() {
  router.matcher = new VueRouter({ routes }).matcher
}

//重建新的路由对象代替旧的路由对象，matcher属性是获得路由的内容
  • 页面刷新与路由

页面刷新后，会导致动态添加的路由失效，解决方法是将路由数据存入 sessionStorage

methods: {
    async login() {       
        resetRouter(); // 重置路由     
        const resp = await axios.get(`/api/menu/${this.username}`)
        const array = resp.data;
        // localStorage     即使浏览器关闭，存储的数据仍在
        // sessionStorage   以标签页为单位，关闭标签页时，数据被清除
        sessionStorage.setItem('serverRoutes', JSON.stringify(array))
        addServerRoutes(array); // 动态添加路由
        this.$router.push('/');
    }
}

页面刷新，重新创建路由对象时，从 sessionStorage 里恢复路由数据

const router = new VueRouter({
  routes
})

// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {
  const array = JSON.parse(serverRoutes);
  addServerRoutes(array) // 动态添加路由
}

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

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

相关文章

TypeScript 装饰器详解

TypeScript 装饰器详解

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…
阅读更多...
linux一些基础知识（未完待续）

linux一些基础知识（未完待续）

ldd&#xff1a;输出程序或者库所依赖的共享库列表dmesg -c: 显示系统内核日志/dev/ttyS0: 串口com0/dev/tty: 当前控制台/dev/console&#xff1a;总控制台.local &#xff1a;本地文件 /home/ljg下有多个汉字命名的文件夹&#xff0c;.local不在其中&#xff1a; cat /var…
阅读更多...
正则表达式 空格匹配

正则表达式 空格匹配

目录 一. 前提二. 半角空格 匹配半角空格三. ^ 匹配半角空格开头的半角空格四. ^ $ 匹配整行都是半角空格五. ^[ \t]$ 匹配整行都是半角或Tab空格六. \s 匹配所有空格七. [^\s]匹配除了空格之外的所有内容 一. 前提 &#x1f447;&#x1f447;&#x1f447;有如下所示的内容…
阅读更多...
【2024蓝桥杯/C++/B组/传送阵】

【2024蓝桥杯/C++/B组/传送阵】

题目 问题代码 #include<bits/stdc.h> using namespace std;const int N 1e610; int n; int porter[N]; int ans; int sign[N]; bool used;void dfs(int now, int cnt) {if(sign[now] && used){ans max(ans, cnt);return;}if(!sign[now]){cnt, sign[now] 1; …
阅读更多...
大数据环境安装Elasticsearch Kibana可视化

大数据环境安装Elasticsearch Kibana可视化

1、用yum安装&#xff0c;配置仓库和镜像。 2、用离线软件包&#xff0c;rpm安装。 服务器环境CentOS7.9 因为云安装&#xff0c;配置镜像版本一直没有成功&#xff0c;改为直接下载软件安装。 官方网址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch 因为要…
阅读更多...
提供三方API接口、调用第三方接口API接口、模拟API接口（二）通过token实现防止业务接口的重复调用

提供三方API接口、调用第三方接口API接口、模拟API接口（二）通过token实现防止业务接口的重复调用

背景&#xff1a;紧接着上一篇&#xff0c;API中的签名认证&#xff0c;我通过signature签名机制保证了&#xff0c;参数不被修改&#xff0c;但是如果我们提供给外部的接口&#xff08;此时我们作为第三方&#xff09;&#xff0c;如果被外部恶意重复调用怎么办&#xff1f; 此…
阅读更多...
并行编程实战——TBB中的图

并行编程实战——TBB中的图

一、graph 在TBB框架中&#xff0c;基础的运行框架就是图graph。简单的回顾一下什么是图&#xff1f;图是由顶点和边组成的数学结构&#xff0c;表示对象及其之间的关系。图分为有向图和无向图。在TBB中&#xff0c;其实它的图叫做流图&#xff08;Flow Graph&#xff09;&…
阅读更多...
【leetcode详解】直角三角形：用空间换时间(O(m*n*(m+n))＞O(m*n))(思路详解)

【leetcode详解】直角三角形：用空间换时间(O(m*n*(m+n))＞O(m*n))(思路详解)

思路详解&#xff1a; 0. 遍历矩阵grid中每个点&#xff0c;若为“1”&#xff0c;则尝试将其视为直角三角形的直角顶点&#xff0c;关注该点所在横、纵轴&#xff0c;是否有其他点为“1”&#xff08;来与之构成直角边&#xff09; 1. 关于如何计算以该点为直角顶点的直角三…
阅读更多...
【Python实战】一键生成 PDF 报告，图文并茂，代码全公开

【Python实战】一键生成 PDF 报告，图文并茂，代码全公开

话接上篇&#xff1a; 自动化处理 PDF 文档&#xff0c;完美实现 WPS 会员功能如何优雅地实现 PDF 去水印&#xff1f; 后台有小伙伴们问&#xff1a;能否基于已有的内容&#xff08;文本、图像等&#xff09;&#xff0c;一键生成 PDF 文档&#xff1f; 或者说&#xff0c;…
阅读更多...
性能测试强化训练营*-可看（随意）

性能测试强化训练营*-可看（随意）

一.性能测试:目的/意义&#xff0c;误区 功能测试 VS 性能测试:测试一辆汽车: 功能: 轮子转不转&#xff0c;方向盘转向动不动&#xff0c;点火能不能打开发动机… --使用者&#xff0c;功能能否按照我的想法去正常使用(应用) 性能: 噪音大不大&#xff0c;百公里加速多少秒&a…
阅读更多...
会员制重启却陷“过期门”，盒马鲜生扩张背后隐忧重重

会员制重启却陷“过期门”，盒马鲜生扩张背后隐忧重重

在新零售浪潮中&#xff0c;盒马鲜生曾以“新鲜每一刻”为口号&#xff0c;迅速崛起并赢得了众多消费者的青睐。然而&#xff0c;随着其会员制的重启&#xff0c;一系列食品安全问题却如同阴霾般笼罩在这家新零售巨头的上空&#xff0c;让新老会员倍感失望与不安。 近日&#x…
阅读更多...
跳表Java

跳表Java

跳表&#xff08;Skip List&#xff09;是一种用于有序数据存储的数据结构&#xff0c;它在链表的基础上增加了多级索引&#xff0c;从而提高了查找、插入和删除操作的效率。跳表的平均时间复杂度为 O ( log ⁡ n ) O(\log n) O(logn)&#xff0c;与平衡二叉搜索树&#xff08…
阅读更多...
编程小白如何成为大神？——新生入门指南

编程小白如何成为大神？——新生入门指南

编程小白如何成为大神&#xff1f;——新生入门指南 作为一名已经从985高校毕业的研究生&#xff0c;我深刻体会到编程已成为当代大学生的必备技能。无论是为了学术研究&#xff0c;还是未来的职业发展&#xff0c;掌握编程都能为我们提供更多的机会和竞争优势。然而&#xff…
阅读更多...
vscode启动不了的问题解决

vscode启动不了的问题解决

1、安全模式下启动vscode从中查看日志&#xff1a; code --verbose at Ce.d (C:\Users\yonghu\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\code\electron-main\main.js:116:3783)at Ce.a (C:\Users\yonghu\AppData\Local\Programs\Microsoft VS Code\res…
阅读更多...
ts保姆级学习指南

ts保姆级学习指南

什么是 TypeScript&#xff1f; TypeScript&#xff0c;简称 ts&#xff0c;是 JavaScript 的超集&#xff0c;而且它最大的特点之一就是引入了静态类型支持。这意味着开发者可以在 TypeScript 中定义变量、函数参数等的类型&#xff0c;编译器会在编译时进行类型检查&#xf…
阅读更多...
Ubuntu配置Ngbatis学习环境

Ubuntu配置Ngbatis学习环境

引言 经过考虑&#xff0c;我感觉与NebulaGraph交互的ORM框架还是Ngbatis好。因为现在这个框架开发的比较完善&#xff0c;而且还在不断更新&#xff0c;社区活跃的用户多。从今日开始学习&#xff0c;首先要配置一下环境。 1.安装maven和jdk 选择的版本是maven3.8和jdk17.以…
阅读更多...
iPhone可运行的谷歌Gemma 2 2B模型，性能超GPT-3.5

iPhone可运行的谷歌Gemma 2 2B模型，性能超GPT-3.5

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…
阅读更多...
关于inet_addr()中的参数不能是 sring类型的 只能是 string类型变量.c_str()

关于inet_addr()中的参数不能是 sring类型的 只能是 string类型变量.c_str()

源码展示&#xff1a; extern in_addr_t inet_addr (const char *__cp) __THROW inet_addr中的参数是const char *类型的 定义一个string 类型的ip 使用这个inet_addr()接口 local.sin_addr.s_addr inet_addr(ip_.c_str()); local.sin_addr.s_addr inet_addr(&ip_);…
阅读更多...
ELK对业务日志进行收集

ELK对业务日志进行收集

ELK对业务日志进行收集 下载httpd 进到文件设置收集httpd的文件进行 设置 编辑内容 用于收集日志的内容 将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…
阅读更多...
基于SpringBoot+Vue的健身俱乐部网站(带1w+文档)

基于SpringBoot+Vue的健身俱乐部网站(带1w+文档)

基于SpringBootVue的健身俱乐部网站(带1w文档) 基于SpringBootVue的健身俱乐部网站(带1w文档) 该系统采用java技术&#xff0c;结合ssm框架使页面更加完善&#xff0c;后台使用MySQL数据库进行数据存储。系统主要分为三大模块&#xff1a;即管理员模块和用户模块、教练模块。本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023