vue全家桶（三）前端路由

news2024/10/10 12:24:47

vue全家桶（三）前端路由

  • 1.路由的概念
    • 1.1路由
    • 1.2vue Router
  • 2.vue-router的基本使用步骤
    • 2.1基本使用步骤
    • 2.2路由重定向
  • 3.vue-router的嵌套路由用法
    • 3.1嵌套路由的用法
  • 4.vue-router动态路由匹配用法
  • 5.vue-router命名路由用法
  • 6.vue-router编程式导航用法
    • 6.1 页面导航的两种方式
    • 6.2 编程式导航基本用法
  • 7.能够基于路由方式实现业务功能

1.路由的概念

1.1路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发过程中，路由分为后端路由，前端路由

  • 后端路由
    概念：根据不同的用户URL请求，返回不同的内容
    本质：URL请求地址与服务器资源之间的对应关系

  • 前端路由
    概念：根据不同的用户事件，返回不同的内容
    本质：用户事件与事件处理函数之间的对应关系

1.2vue Router

vue Router是vue.js官方的路由管理器
https://router.vuejs.org/zh/
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

2.vue-router的基本使用步骤

2.1基本使用步骤

  1. 引入相关库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到vue实例中

2.2路由重定向

路由的重定向值得是：
用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面

router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/user">User1</router-link>
        <router-link to="/register">Register1</router-link>

        <!-- 路由占位符 -->
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script>
        const User = {
            template: '<h1>User2 组件</h1>'
        }
        const Register = {
            template: '<h1>Register2 组件</h1>'
        }

        // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则
            routes: [
            //其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
            { path: '/', redirect: '/user'},
            {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        })
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
        })
    </script>
</body>
</html>

官方

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>

<body>
    <!-- 被 实例所控制的区域 -->
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 `to` 来指定链接 -->
            <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
            <router-link to="/">Go to Home1</router-link>
            <router-link to="/about">Go to About1</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script>
        // 1. 定义路由组件.
        // 也可以从其他文件导入
        const Home = {
            template: '<div>Home2</div>'
        }
        const About = {
            template: '<div>About2</div>'
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        // 我们后面再讨论嵌套路由。
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/about',
            component: About
        }, ]
        // 3. 创建路由实例并传递 `routes` 配置
        // 你可以在这里输入更多的配置，但我们在这里
        // 暂时保持简单
        const router = VueRouter.createRouter({
                // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
                history: VueRouter.createWebHashHistory(),
                routes, // `routes: routes` 的缩写
            })
            // 5. 创建并挂载根实例
        const app = Vue.createApp({})
            //确保 _use_ 路由实例使
            //整个应用支持路由。
        app.use(router)
        app.mount('#app')
    </script>
</body>
</html>

3.vue-router的嵌套路由用法

3.1嵌套路由的用法

1.嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
      <!-- 路由占位符（控制组件的显示位置） -->
      <router-view></router-view>
    </div>
    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>
          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>
          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }
      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }
      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // 通过children属性 为/register添加子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

4.vue-router动态路由匹配用法

通过动态路由参数的模式进行路由匹配

如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数，
在这里插入图片描述

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <router-link to="/register">Register</router-link>
        <router-link to="/list/1">list1</router-link>
        <router-link to="/list/2">list2</router-link>
        <router-link to="/info/1">info1</router-link>
        <router-link to="/info/2">info2</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

    <script>
        const User = {
            props: ['id'],
            template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
        }
        const Register = {
            template: '<h1>Register 组件</h1>'
        }
        const list = {
            template: '<h1>list 组件 -- 用户id为: {{$route.params.id}}</h1>'
        }
        const info = {
                props: ['id', 'uname', 'age'],
                template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
            }
            // 创建路由实例对象
        const router = new VueRouter({
                // 所有的路由规则
                routes: [{
                        path: '/',
                        redirect: '/user'
                    }, {
                        path: '/user/:id',
                        component: User,
                        props: true
                    }, {
                        path: '/register',
                        component: Register
                    }, {
                        path: '/list/:id',
                        component: list
                    }, {
                        path: '/info/:id',
                        component: info,
                        props: route => ({
                            uname: 'aaa',
                            age: 20,
                            id: route.params.id
                        })
                    },

                ]
            })
            // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            router
        })
    </script>
</body>

5.vue-router命名路由用法

<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { id: 13 } })

{
    // 命名路由
    name: 'user',
    path: '/user/:id',
    component: User,
    props: route => ({ uname: 'zs', age: 20, id: route.params.id })
},

6.vue-router编程式导航用法

6.1 页面导航的两种方式

  • 声明式导航：通过点击链接实现导航的方式
    例如：普通网页中的<a></a>链接，或者vue中的<router-link></router-link>
  • 编程式导航：通过调用javascript形式的API实现导航的方式
    普通网页中的localtion.href

6.2 编程式导航基本用法

常用的编程式导航API如下：

  • this.$router.push(‘hash地址’)
  • this.$router.go(n)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

router.push()方法的参数规则
在这里插入图片描述

7.能够基于路由方式实现业务功能

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

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

相关文章

06 Sentinel控制台规则配置讲解 （2）

06 Sentinel控制台规则配置讲解 （2）

1、实时监控 监控接口的通过的QPS和拒绝的QPS 2、簇点链路 用来显示微服务的所监控的API 3、流控规则 流量控制&#xff08;flow control&#xff09;&#xff0c;其原理是监控应用流量的 QPS 或并发线程数等指标&#xff0c;当达到指定的阈值时对流量进行控制&#xff0c;以…
阅读更多...
源于《C陷阱与缺陷》----研究程序死循环问题

源于《C陷阱与缺陷》----研究程序死循环问题

本题来源于《C陷阱与缺陷》这本书&#xff0c;从本质上讲解程序死循环的原因&#xff0c;关键在于栈的空间使用方式。研究程序死循环的原因死循环的原因是什么呢&#xff1f;解决方法总结研究程序死循环的原因 题目1&#xff1a; 在VS2019 X86环境下测试&#xff1a; int mai…
阅读更多...
Linux服务器怎么设置iptables防火墙？

Linux服务器怎么设置iptables防火墙？

当今&#xff0c;为避免香港服务器及其端口受到恶意入侵&#xff0c;保障香港服务器的安全&#xff0c;配置Linux服务器防火墙的重要性不言而喻。恒创科技将向您介绍如何在 CentOS、Ubuntu 和 Debian 服务器中安装和配置 iptables防火墙。iptables是一个简单的防火墙&#xff0…
阅读更多...
测试工程师必备技能之编写测试用例

测试工程师必备技能之编写测试用例

1. 必要性 &#x1f449; 指导测试工作&#xff0c;用例通过率是评估质量的基准 &#x1f449; 完善测试人员测试的整体思路&#xff0c;不出现漏测 ❗️ 避免背锅&#xff0c;线上出了问题防止开发甩锅给测试 2. 模板 企业中用例往往是每个人负责不同模块&#xff0c;再根据…
阅读更多...
Verilog实现超前进位加法器

Verilog实现超前进位加法器

在CPU等对性能要求较高的电路中&#xff0c;一般都会采用超前进位加法器&#xff0c;因为超前进位加法器的延时相对来说比较小。下面讲述超前进位加法器的原理&#xff1a; 我们知道&#xff0c;一个三输入&#xff0c;二输出的全加器&#xff0c;其逻辑关系为 SA⊕B⊕CinSA\op…
阅读更多...
每日一练9——另类加法走方格的方案数

每日一练9——另类加法走方格的方案数

文章目录另类加法思路&#xff1a;代码&#xff1a;走方格的方案数思路&#xff1a;代码&#xff1a;另类加法 题目链接 思路&#xff1a; 本题可以通过位运算实现&#xff0c;具体实现如下&#xff1a; 两个数求和&#xff0c;其实就是 求和后当前位的数据两个数求和的进位…
阅读更多...
Ceres Solver解算已知函数模型参数

Ceres Solver解算已知函数模型参数

一、介绍Ceres solver 是谷歌开发的一款用于非线性优化的库&#xff0c;在已知一个函数表达式&#xff0c;以及一组观测到的值&#xff0c;利用最小二乘是可以解算得到相关参数。下面举例使用ceres solver解算直线函数以及曲线函数参数。其过程包括三个步骤&#xff1a;&#x…
阅读更多...
图为技术：专注核心技术 引领行业发展

图为技术：专注核心技术 引领行业发展

图为技术T-3D引擎经过多年的技术积累与原始创新&#xff0c;作为国内首批基于分布式技术进行三维图形底层渲染的开拓者&#xff0c;不仅在渲染架构上优势明显&#xff0c;同时其所具备数据管理能力也十分卓越。分布式架构采用独创的(Multi Compute Server To Web Render)架构方…
阅读更多...
Java多线程之CAS中的ABA问题与JUC的常见类

Java多线程之CAS中的ABA问题与JUC的常见类

文章目录一. CAS指令与ABA问题1. 解析CAS2. 基于CAS实现的原子类3. 基于CAS实现自旋锁4. ABA问题二. JUC中的常见类1. Callable接口2. ReentrantLock类(可重入锁)3. Semaphore类(信号量)4. CountDownLatch同步工具类一. CAS指令与ABA问题 1. 解析CAS CAS即compare and awap, …
阅读更多...
Cesium 坐标系的转换，空间数据加载 粒子系统加载

Cesium 坐标系的转换，空间数据加载 粒子系统加载

在vue中引入Cesium.js官网下载好的Cesium文件放入vue项目中index.html中引入,在js文件即可智能提示&#xff0c;或者下载依赖包也可<script src"./Cesium/Cesium.js"></script><link rel"stylesheet" href"./Cesium/Widgets/widgets.c…
阅读更多...
若依配置教程（六）Excel导入功能实现

若依配置教程（六）Excel导入功能实现

若依官网导入实现流程 文章目录一、前端index.vue中1.在所需模块的index.vue中的< script >< /script >中增加如下代码&#xff1a;2.在< template >< /template >中添加导入按钮事件&#xff1a;3.添加导入前端代码&#xff1a;二、在模块文件夹(ruoy…
阅读更多...
数学建模学习笔记（17）灰色预测模型和神经网络

数学建模学习笔记（17）灰色预测模型和神经网络

文章目录灰色预测模型相关基本概念GM(1,1)模型的使用步骤GM(1,1)模型的拓展模型GM(1,1)模型的注意事项BP神经网络预测模型的注意事项灰色预测模型 相关基本概念 系统的分类&#xff1a; 白色系统&#xff1a;系统的信息是完全明确的。灰色系统&#xff1a;系统的部分信息已知…
阅读更多...
readelf指令使用

readelf指令使用

一、指令说明readelf命令&#xff0c;一般用于查看ELF格式的文件信息&#xff0c;常见的文件如在Linux上的可执行文件&#xff0c;动态库(*.so)或者静态库(*.a) 等包含ELF格式的文件。以下命令的使用是基于android编译出来的so文件上面去运行。readelf常用命令语法&#xff1a;…
阅读更多...
视网膜电图特征可以检测成人的抑郁状态和治疗反应：一种机器学习方法

视网膜电图特征可以检测成人的抑郁状态和治疗反应：一种机器学习方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 视网膜电图特征可以检测成人的抑郁状态和治疗反应&#xff1a;一种机器学习方法摘要1. 引言2. 方法和材料2.1 人口与伦理声明2.2 入选标准、临床和生物学评估2.3 实验方案2.4…
阅读更多...
浅析代理IP与VPS

浅析代理IP与VPS

在跨境行业的热浪期&#xff0c;出海早已成为了企业发展的新趋势。像跨境电商&#xff0c;新媒体&#xff0c;旅游等行业都在开拓海外市场&#xff0c;越来越多的企业产生了匿名浏览互联网&#xff0c;隐藏真实IP的需求。能满足用户这一需求的方法有很多种&#xff0c;代理IP与…
阅读更多...
H264/AVC 句法和语义--重要的字段、带截图

H264/AVC 句法和语义--重要的字段、带截图

一 SPS、PPS句法和语义 宽高在SPS里。 profile_idc&#xff1a;baseline、main、high。 level_idc&#xff1a;值越大&#xff0c;最大宏块处理速率等值越大。 m_ptParam.i_level_idc 21; //X264编码参数 chroma_format_idc&#xff1a;1表示采样格式为4:2:0。 frame_mbs_onl…
阅读更多...
C++ 树进阶系列之平衡二叉查找树（ AVL）的自平衡算法

C++ 树进阶系列之平衡二叉查找树（ AVL）的自平衡算法

1. 前言 树的深度与性能的关系。 在二叉排序树上进行查找时&#xff0c;其时间复杂度理论上接近二分算法的时间复杂度O(logn)。 但是&#xff0c;这里有一个问题&#xff0c;如果数列中的数字顺序不一样时&#xff0c;构建出来的二叉排序树的深度会有差异性&#xff0c;对最…
阅读更多...
【Unity VR开发】结合VRTK4.0：抛物线

【Unity VR开发】结合VRTK4.0：抛物线

模块化开发&#xff08;抛物线&#xff09;&#xff1a; 当我们用久了一个固定的东西之后就不想去追求新的东西&#xff0c;其实这是一种懒惰&#xff0c;每个人都应该明白&#xff0c;每一天&#xff0c;这个时间都在发生着变化&#xff0c;不管是人、事、物&#xff0c;而我…
阅读更多...
[Android开发练习3] 四季图的切换

[Android开发练习3] 四季图的切换

前言 本题主要涉及到使用帧式布局&#xff0c;以及如何为组件设置点击的事件响应&#xff0c;包括获取事件源&#xff0c;设置事件监听器&#xff0c;在Activity文件中书写一般的业务逻辑代码。 文章目录 布局代码 text3_season.xml&#xff08;layout&#xff09; style.xm…
阅读更多...
私有云OpenStack学习笔记1

私有云OpenStack学习笔记1

私有云&#xff1a;自己组建私有云系统。 私有云系统有哪些呢&#xff1f; OpenStack、CloudStack、Eucalyptus、vCloud Director四大主流云平台。 云计算有极大的潜力提高效率&#xff0c;显著地节约成本&#xff0c;实现可升级的基础设施和高性能以及安全的数据存储。 Ope…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023