• Vue-router基础知识（上）

    Vue-router基础知识（上）

    1.重点内容

    1.重点内容

    • 初识路由
    • vue-router
    • 嵌套路由
    • 动态路由
    • 命名视图
    • 命名路由
    • 编程式导航

    1.1学习目标

    1.目标：

    如何使用？如何传参？如何进行嵌套是需要重点掌握的知识

    • 了解vue-router的实现原理
    • 掌握vue-router的基本使用
    • 掌握命名路由、命名视图和编程式导航及query、params传参方式的方法
    • 掌握路由对象的常用属性和动态路由的匹配及路由嵌套的方法

    1.2初识路由

    需要重点掌握两个知识，后端路由和前端路由。

    1.2.1后端路由

    1.后端路由：简单说就是一个url地址。是实现动态网页的一种方式。

    下面是简介：

    • 后端路由根据不同URL地址分发用户请求到服务器端的不同处理程序，这些服务器端处理程序返回动态生成的HTML页面。

    2.后端路由的原理图

    后端根据不同的资源地址对动态的生成不同的页面。

     

    缺点：延迟。每次请求后端，都会产生一个指定的html界面，然后再返回到浏览器进行解析产生对应的页面。延迟是硬伤。

    1.2.2Vue前端路由

    1.简介：通过在请求的域名的后面加上#名称方式显示不同的界面。#对于后端来说是无效的。

    完整简介如下：

    前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页面应用（SPA）来说，主要通过URL中的hash（#号）来实现不同页面之间的切换（实际上“实现不同组件之间的切换”） 。hash有一个特点，就是HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash来实现。
    #号是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包含#。
    比如，访问下面的网址：
    http://jquery.com#hello
    浏览器实际发出的请求时这样的：
    Request URL:http://jquery.com/
    Request Method:GET
    可以看到，只是请求了http://jquery.com，没有请求"#hello"的部分。

    2.前端路由工作原理：

     

    上图中，URL用户请求是由前端路由来处理的，前端路由根据hash值显示页面中的对应组件。

    --当hash值为“/home”时，就显示“首页”组件。

    --当hash值为“/about”时，就显示“关于”组件。

    --当hash值为“/person”时，就显示“我的资料”组件。

    1.2.3路由的案例1

    第一步：安装路由的插件

     

    第二步：创建test1.html练习前端路由的基本使用的方法

    页面中需要定义的东西有

    • div用于实现el挂载
    • router-link放置前端路由，to用于指定前端的路由
    • router-view用于显示前端路由要显示的内容
    • var home={template：'定义模板的信息'}
    • VueRouter+routes定义的是路由的匹配规则
    • Vue+router实现的是页面的挂载和实现的路由协议的绑定
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>路由案例1</title>
    9.         <!-- 导入vue和vue-router -->
    10.         <script src="vue.js"></script>
    11.         <script src="vue-router.js"></script>
    12.     </head>
    13.  
    14.     <body>
    15.         <div id="app">
    16.             <!-- 定义路由超链接 -->
    17.             <!-- to指定的是我们前端路由的路径 -->
    18.             <router-link to="/home">首页</router-link>
    19.             <router-link to="/about">关于</router-link>
    20.             <router-link to="/login">登录</router-link>
    21.             <router-link to="/register">注册</router-link>
    22.             <!-- 设置一个router-view显示需要显示的内容 -->
    23.             <router-view></router-view>
    24.         </div>
    25.     </body>
    26.     <!-- 创建组件 -->
    27.     <script>
    28.         // 创建组件的内容
    29.         var home = { template: '
      首页的相关内容
      '       }
    30.         var about = { template: '
      关于的相关内容
      '       }
    31.         var login = { template: '
      登录的相关内容
      '       }
    32.         var register = { template: '
      注册的相关内容
      '       }
    33.         // 创建vue-router对象
    34.         const router = new VueRouter({
    35.  
    36.             // 配置路由的匹配的规则
    37.             routes: [
    38.                 { path: '/home', component: home },
    39.                 { path: '/about', component: about },
    40.                 { path: '/login', component: login },
    41.                 { path: '/register', component: register }
    42.  
    43.             ]
    44.         })
    45.         // 创建vue实例对象
    46.         const vm = new Vue({
    47.             // 设置挂载点
    48.             el: "#app",
    49.             // 将路由规则绑定到当前的vm实例上去
    50.             router: router
    51.         })
    52.     </script>


     

    效果图：

    开始显示的页面是“首页”

    当我点击“关于”的时候就会跳转到关于的相关界面

     

    总结实现了前端路由的基本操作，实现单页面不同的路径的跳转。

    前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。

    1.2.4vue-router工作原理

    1.简介：

    单页面的思想+vuerouter的应用，hash模式的传值

    单页面应用（SPA）的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。
    对于大多数单页面应用，都推荐使用官方支持的vue-router。
    在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

    2.常见的工作模式：

    第一种模式：hash

    hash：格式，域名+#+hash值。重点，记住就行。

    完整的简介：

    vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值，称为hash值。

    路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。
    所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

    第二种模式：

    history模式是HTML5 新推出的功能，主要使用history.pushState和history.replaceState改变 URL。通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。

    History模式不常用，在此不再赘述。

    1.2.5vue-router的基本使用

    1.功能：

    vue-router可以实现：

    • --当用户单击页面中的A按钮时，页面显示内容A；
    • --当用户单击页面中的B按钮时，页面显示内容B。
    • 换言之，用户单击的按钮和页面显示的内容，两者是映射的关系。

    1.2.6route-router-routes概念理解

    1.概念理解：学习vue-router的基本使用前，首先了解路由中3个基本的概念：route、routes、router。

    • route ：表示它是一条路由，单数形式。
    • routes：表示它是一组路由，把route的每一条路由组合起来，形成一个数组。
    • router：表示它是一个机制，充当管理路由的管理者角色。

    1.2.7vue-router的基本使用-案例2

    1.详见test2.html

    1. 导入vue和vue-router的文件

     

            2.编写html结构的代码

     

            3.编写JavaScript逻辑代码

     

            4.在浏览器中打开文件，会看到页面中只有“前往登录”这4个字，单击“前往登录”，就会在下方出现“登录组件”，效果如下图所示。

    运行界面图：

     

    当点击登录后的界面

     

    1.3Vue-router对象的属性

    1.简介：

    Vue的对象属性。this.$route可以实现当前页面获取传递的参数的值

    路由对象属性包括以下两种：
    （1）this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。
    （2）this.$route表示当前正在用于跳转的路由对象，可以访问其name、path、query、params等属性。

    1.3.1$route常见的属性

    1.常见的属性如下图所示。

    第二个和第三个是用于获取传递的参数的，只不过获取的当时有所不同。

     

    1.4动态路由

    1.重点内容

    • 什么是动态路由
    • query方式传递参数
    • params方式传递参数

    1.4.1动态路由简介

    说白了静态的就是写死的，但是对于动态的可以根据传递的参数动态的生成某些页面。再直白点就是传递参数生成不同的页面。

    1.简介：上面讲到的路由，都是严格匹配的，只有router-link中的to属性和JavaScript中定义的路由中的path一样时，才会显示对应的component。
    但在实际开发时，这种方式是明显不足的，例如，在不同角色登录网站时，在去配置路由的时候，需要把用户id作为参数传入，这就需要利用动态路由来实现。
    在vue-router的路由路径中，可以使用动态路径参数给路径的动态部分匹配不同的id。

    2.图示演示

    动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。

    在vue-router的路由路径中，可以使用动态路径参数给路径的动态部分匹配不同的id，示例代码如下。

     

    1.4.2query方式传参

    1.简介：

    在理解了动态路由的概念后，接下来我们结合案例学习如何使用query方式传递参数。

    通过query方式传递参数，使用path属性给定对应的跳转路径（类似于GET请求），在页面跳转的时候，可以在地址栏看到请求参数。

    2.案例3-test3.html

    在router-link中采用的是?id=xxx&password=xxx传递参数的方式

    在组件中采用的是获取参数的第一种方式,$route.query.参数的名称

    参考代码：

    1. html>
    2. <html lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>路由案例3title>
    9.         
    10.         <script src="vue.js">script>
    11.         <script src="vue-router.js">script>
    12.     head>
    13.  
    14.     <body>
    15.         <div id="app">
    16.             
    17.             
    18.             <router-link to="/login?id=1001&password=123456">登录router-link>
    19.             
    20.             <router-view>router-view>
    21.         div>
    22.     body>
    23.     
    24.     <script>
    25.         // 创建组件的内容（采用的是局部组件的方式）
    26.         var login = { template: '
      恭喜id：{{$route.query.id}},password:{{$route.query.password}}登录成功！
      '       }
    27.         // 创建vue-router对象
    28.         const router = new VueRouter({
    29.             // 配置路由的匹配的规则
    30.             routes: [
    31.                 { path: '/login', component: login }
    32.             ]
    33.         })
    34.         // 创建vue实例对象
    35.         const vm = new Vue({
    36.             // 设置挂载点
    37.             el: "#app",
    38.             // 将路由规则绑定到当前的vm实例上去
    39.             router: router
    40.         })
    41.     script>
    42.  
    43.  
    44. html>

    运行的界面图

    跳转后的界面图：

    1.4.3params方式传参

    1.简介：

    接下来结合案例讲解如何使用params方式传递参数。

    使用params方式则不需要通过查询字符串传参。

    2.案例：test4.html

    采用的是restful传递参数的方式

    和第一种方式的区别在于传递参数的时候?和&改成了/

    在获取参数的时候也是有所不同的

    不同点如下：

     

    参考代码：

    1. html>
    2. <html lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>路由案例4title>
    9.         
    10.         <script src="vue.js">script>
    11.         <script src="vue-router.js">script>
    12.     head>
    13.  
    14.     <body>
    15.         <div id="app">
    16.             
    17.             
    18.             
    19.             <router-link to="/login/1001/123456">登录router-link>
    20.             
    21.             <router-view>router-view>
    22.         div>
    23.     body>
    24.     
    25.     <script>
    26.         // 创建组件的内容（采用的是局部组件的方式）
    27.         var login = { template: '
      恭喜id：{{$route.params.id}},password:{{$route.params.password}}登录成功！
      '       }
    28.         // 创建vue-router对象
    29.         const router = new VueRouter({
    30.             // 配置路由的匹配的规则
    31.             routes: [
    32.                 { path: '/login/:id/:password', component: login }
    33.             ]
    34.         })
    35.         // 创建vue实例对象
    36.         const vm = new Vue({
    37.             // 设置挂载点
    38.             el: "#app",
    39.             // 将路由规则绑定到当前的vm实例上去
    40.             router: router
    41.         })
    42.     script>
    43.  
    44.  
    45. html>

    运行的效果图：

    传递参数后的效果图：

     

    1.5路由嵌套

    1.5.1路由嵌套的简介

    白话，套娃。需要用到一个关键字children

    1.简介：是否是嵌套路由主要是由页面结构来决定的，实际项目中的应用界面，通常由多层嵌套的组件组合而成。

    简而言之，嵌套路由就是在路由里面嵌套它的子路由。

    2.详细的解释：

    嵌套子路由的关键属性是children，children也是一组路由，相当于前面讲到的routes，children可以像routes一样的去配置路由数组。

    每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器。

    3.基本的语法：

    4.注意：当使用children属性实现子路由时，子路由的path属性前不要带“/”，否则会永远以根路径开始请求，这样不方便用户去理解URL地址，示例代码如下。

    1.5.2路由嵌套的案例 test5.html

    效果图：

    css代码如下：

    1.     
    2.         <style>
    3.             ul,
    4.             li,
    5.             h1 {
    6.                 padding: 0;
    7.                 margin: 0;
    8.                 list-style: none
    9.             }
    10.  
    11.             #app {
    12.                 width: 100%;
    13.                 display: flex;
    14.                 flex-direction: row;
    15.             }
    16.  
    17.             ul {
    18.                 width: 200px;
    19.                 flex-direction: column;
    20.                 color: #fff;
    21.             }
    22.  
    23.             li {
    24.                 flex: 1;
    25.                 background: #000;
    26.                 margin: 5px auto;
    27.                 text-align: center;
    28.                 line-height: 30px;
    29.             }
    30.  
    31.             .about-detail {
    32.                 flex: 1;
    33.                 margin-left: 30px;
    34.             }
    35.  
    36.             .about-detail h1 {
    37.                 font-size: 24px;
    38.                 color: blue;
    39.             }
    40.         style>

    其余代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.         <title>路由案例5</title>
    9.         <!-- 导入vue和vue-router -->
    10.         <script src="vue.js"></script>
    11.         <script src="vue-router.js"></script>
    12.         <!-- css样式 -->
    13.  
    14.     </head>
    15.  
    16.     <body>
    17.         <div id="app">
    18.             <!-- 定义路由超链接 -->
    19.             <!-- to指定的是我们前端路由的路径 -->
    20.  
    21.             <ul>
    22.                 <router-link to="/about" tag="li">关于公司</router-link>
    23.                 <router-link to="/contact" tag="li">联系我们</router-link>
    24.             </ul>
    25.             <!-- 给父路由组件提供插入的位置 -->
    26.             <router-view></router-view>
    27.         </div>
    28.         <!-- 关于我们界面 -->
    29.         <template id="about-tmp">
    30.             <div class="about-detail">
    31.                 <h1>北京xx科技有限公司简介</h1>
    32.                 <router-link to="/about/detail">公司简介</router-link> |
    33.                 <router-link to="/about/governance">公司治理</router-link>
    34.                 <router-view></router-view>
    35.                 <!--给子路由组件提供插入位置-->
    36.             </div>
    37.         </template>
    38.         <!-- 联系我们 -->
    39.         <template id="contact-tmp">
    40.             <div class="about-detail">
    41.                 <h1>联系我们</h1>
    42.                 <p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐、服装设计等
    43.                 </p>
    44.             </div>
    45.         </template>
    46.  
    47.     </body>
    48.     <!-- 创建组件 -->
    49.     <script>
    50.  
    51.         //   创建路由的组件
    52.         var about = { template: '#about-tmp' }
    53.         var contact = { template: '#contact-tmp' }
    54.         // 创建子路由的组件
    55.         var detail = { template: '
      xx是全球领先... ...
      '       }
    56.         var governance = {
    57.             template: '
      公司坚持以客户为中心、以奋斗者为本... ...
      '
    58.         }
    59.         // 创建路由
    60.         var router = new VueRouter({
    61.             routes: [
    62.                 { path: '/', redirect: '/about' }, // 路由重定向
    63.                 {
    64.                     path: '/about', component: about,
    65.                     // 定义子路由
    66.                     children: [
    67.                         { path: 'detail', component: detail },
    68.                         { path: 'governance', component: governance }
    69.                     ]
    70.                 },
    71.                 { path: '/contact', component: contact }
    72.             ]
    73.         })
    74.  
    75.         // 创建vue实例对象
    76.         const vm = new Vue({
    77.             // 设置挂载点
    78.             el: "#app",
    79.             // 将路由规则绑定到当前的vm实例上去
    80.             router: router
    81.         })
    82.     </script>
    83.  
    84.  
    85. </html>

    效果图：

     

    点击联系我们：

     

    点击关于我们：

     

     

  • 相关阅读:
    fastjson漏洞复现
    如何清理 mac 磁盘？快速清理小妙招在这里
    Java面试题 JVM 篇 Redis篇 Spring篇
    1990-2022上市公司董监高学历工资特征信息数据/上市公司高管信息数据
    Shell基础介绍与Shell编程基础
    使用YOLOv10训练自己的【目标检测】数据集-【收集数据集】-【标注数据集】-【划分数据集】-【配置训练环境】-【训练模型】-【评估模型】-【导出模型】
    金仓数据库KStudio使用手册（3. 数据库管理）
    漫谈：C语言 C++ 迷惑的语句、分号、大括号
    JVM基础：字节码文件详解①
    架构整洁之道（二）
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127438234