• Vue-router基础知识（下）

    Vue-router基础知识（下）

    1.Vue-router基础知识（上）请移步博客：

    https://blog.csdn.net/weixin_41957626/article/details/127438234

    案例代码免费下载地址为：

    vue路由案例的代码test1-test5-Javascript文档类资源-CSDN下载

    如下载失败私聊博主即可♥

    1.知识回顾

    在Vue-router基础知识（上）我们主要学习了什么是前端路由和什么是后端路由，学会了vue-router的基本使用，两种传递参数的方式以及$route.query以及$route.params的使用。学会了使用children实现路由的嵌套。

    1.1案例回顾-登录界面案例

    下面通过一个简单的案例回顾昨天学习的知识。

    案例如下：首先显示的是如下界面。下面的“电脑登录入口”和“手机登录入口”是两个子组件。

     

    当点击“电脑登录入口”就会显示电脑登录的入口地址。

     

    当点击“关于我们”就会跳转到“关于我们”的界面。

     

    参考代码：test5回顾.html

    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>知识回顾</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.             <ul>
    19.                 <router-link to="/login" tag="li">登录</router-link>
    20.                 <router-link to="/about" tag="li">关于我们</router-link>
    21.             </ul>
    22.             <!-- 给父路由组件提供插入的位置 -->
    23.             <router-view></router-view>
    24.         </div>
    25.         <!-- 关于我们界面（组件） -->
    26.         <template id="login-tmp">
    27.             <div>
    28.                 <h1>请选择合适的登录入口</h1>
    29.                 <router-link to="/login/pc">电脑登录入口</router-link> |
    30.                 <router-link to="/login/phone">手机登录入口</router-link>
    31.                 <router-view></router-view>
    32.                 <!--给子路由组件提供插入位置-->
    33.             </div>
    34.         </template>
    35.         <!-- 联系我们 -->
    36.         <template id="contact-tmp">
    37.             <div>
    38.                 <h1>联系我们</h1>
    39.                 <p>我是一个热爱计算机的无名小卒
    40.                 </p>
    41.             </div>
    42.         </template>
    43.  
    44.     </body>
    45.     <!-- 创建组件 -->
    46.     <script>
    47.  
    48.         //   创建路由的组件
    49.         var login = { template: '#login-tmp' }
    50.         var contact = { template: '#contact-tmp' }
    51.         // 创建子路由的组件
    52.         var pc = { template: '
      当前是电脑登录的入口...
      '       }
    53.         var phone = {
    54.             template: '
      当前是手机登录的入口...
      '
    55.         }
    56.         // 创建路由
    57.         var router = new VueRouter({
    58.             routes: [
    59.                 // 默认显示的就是login界面
    60.                 // 路由重定向
    61.                 { path: '/', redirect: '/login' },
    62.                 // 定义嵌套的路由
    63.                 {
    64.                     path: '/login', component: login,
    65.                     // 定义子路由
    66.                     children: [
    67.                         { path: 'pc', component: pc },
    68.                         { path: 'phone', component: phone }
    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>

    2.命名路由

    2.1简介

    1.简介：

    白话：就是自定指定路由的名称。就不用写path那么长的路径了直接引用名称就可以。

    vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。

    通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。

    命名路由的方式下，无论path多长、多烦琐，都能直接通过name来引用，十分方便。

    2.2案例

    第一步：采用对象最为路由的方式

    1.  <!--当使用对象作为路由的时候，to前面要加一个冒号，表示绑定-->
    2. <router-link :to="{name:'user',params:{id:123}}">登录</router-link>
    3. <router-view></router-view>

    第二步：编写组件代码

    1. var user = {
    2.     template: '<h3>我是user组件{{$route.params.id}}h3>'
    3. }

    第三步：创建路由对象

    1. // 创建路由对象
    2.   var router = new VueRouter({ // 创建路由对象
    3.       routes: [{ path: '/user/:id', name: 'user', component: user }]
    4. })
    5. var vm = new Vue({ el: '#app', router })

    test6.html完整代码如下：

    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>Document</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.             <!--当使用对象作为路由的时候，to前面要加一个冒号，表示绑定-->
    17.             <router-link :to="{name:'user',params:{id:123}}">登录</router-link>
    18.             <router-view></router-view>
    19.         </div>
    20.  
    21.         <script>
    22.             // 编写组件代码
    23.             var user = {
    24.                 template: '
      我是user组件{{$route.params.id}}
      '
    25.             }
    26.             // 创建路由对象
    27.             var router = new VueRouter({ // 创建路由对象
    28.                 routes: [{ 
    29.                 path: '/user/:id', name: 'user', 
    30.                 component: user }]
    31.             })
    32.             var vm = new Vue({ el: '#app', router })
    33.  
    34.         </script>
    35.     </body>
    36.  
    37. </html>

    不使用命名路由的方式如下：其余代码保持不变。

     

    第一步创建路由

     

    采用的是对象传递参数的方法

     

    3.命名视图

    3.1简介

    1.什么是命名视图

    白话：就是对router-view起一个名字，将指定的组件放到指定的router-view中去。

    简介：在开发中，有时候想同时或同级展示多个视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图。

    使用可以为视图进行命名，它主要用来负责路由跳转后组件的展示。在上定义name属性表示视图的名字，然后就可以根据不同的name值展示不同的页面，如left、main等。

    如果没有设置名字，那么默认为default。

    3.2创建命名视图-案例

    要实现的效果图：

     

    参考代码：test8.html

    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>Documenttitle>
    9.         
    10.         <script src="vue.js">script>
    11.         <script src="vue-router.js">script>
    12.         
    13.         <style>
    14.             html,
    15.             body {
    16.                 margin: 0;
    17.                 padding: 0;
    18.             }
    19.  
    20.             h1 {
    21.                 margin: 0;
    22.                 padding: 0;
    23.                 font-size: 16px;
    24.             }
    25.  
    26.             .header {
    27.                 background-color: lightblue;
    28.                 height: 80px;
    29.             }
    30.  
    31.             .container {
    32.                 display: flex;
    33.                 height: 600px;
    34.             }
    35.  
    36.             .sidebar {
    37.                 background-color: lightgreen;
    38.                 flex: 2;
    39.             }
    40.  
    41.             .main {
    42.                 background-color: lightpink;
    43.                 flex: 8;
    44.             }
    45.         style>
    46.     head>
    47.  
    48.     <body>
    49.         <div id="app">
    50.             
    51.             <router-view>router-view>
    52.             <div class="container">
    53.                 
    54.                 
    55.                 <router-view name="left">router-view>
    56.                 <router-view name="main">router-view>
    57.             div>
    58.         div>
    59.  
    60.  
    61.         <script>
    62.             // 组件代码
    63.             var header = { template: '
      header头部区域
      '       }
    64.             var sidebar = { template: '
      sidebar侧导航区域
      '       }
    65.             var mainBox = { template: '
      mainBox主体区域
      '       }
    66.             var router = new VueRouter({
    67.                 routes: [{
    68.                     path: '/',
    69.                     components: {
    70.                         'default': header,
    71.                         'left': sidebar,
    72.                         'main': mainBox
    73.                     }
    74.                 }]
    75.             })
    76.             // 绑定路由
    77.             var vm = new Vue({ el: '#app', router })
    78.  
    79.  
    80.         script>
    81.     body>
    82.  
    83. html>

    效果图如下：

     

    4.编程式导航

    4.1重点知识

    1.重点

    • router.push()
    • router.replace()
    • router.go()

    4.2router.push()简介

    白话，不用非得写router-link实现跳转，可以写对应的js代码实现跳转。比如给button按钮绑定可以实现组件跳转。

    • 在前面的开发中，当进行页面切换时，都是通过来实现的，这种方式属于声明式导航。
    • 为了更方便地在项目中开发导航功能，Vue提供了编程式导航，也就是利用JavaScript代码来实现地址的跳转，通过全局路由对象router的实例方法来实现。
    • 使用router.push()方法可以通过编程方式导航到不同的URL地址。这个方法会向history栈添加一条新的记录，当用户单击浏览器后退按钮时，可以回到之前的URL。
    • 在单击时，router.push()方法会在内部调用，也就是说，单击“”等同于调用
      router.push(...)方法。

    4.2.1router-push()案例

    注意点：router.push()方法的参数可以是一个字符串路径，或者是一个描述路径的对象

    在参数对象中，如果提供了path，params会被忽略，为了传参数，需要提供路由的name或者手写带有参数的path。

    效果图：

    单击前：

    点击登录后的界面。

     

    有两种实现方式：query传参和params传参的方式。

     

    （1）参考代码：test8.html。query传参的方式。

    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>Document</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.             <!-- 不用原先的router-link实现跳转 -->
    17.             <button @click="goLogin">点我去登录</button>
    18.             <router-view></router-view>
    19.         </div>
    20.  
    21.  
    22.         <script>
    23.             // 2.定义组件
    24.             var login = {
    25.                 template: '
      用户名：{{ $route.query.name }}
      '
    26.             }
    27.             // 3.创建路由对象
    28.             var router = new VueRouter({
    29.                 routes: [
    30.                     { path: '/login', component: login }
    31.                 ]
    32.             })
    33.             // 4.绑定路由
    34.             var vm = new Vue({
    35.                 el: '#app',
    36.                 methods: {
    37.                     goLogin() {
    38.                         // 点击route-link :to等同于下面的语句.掩藏了请求的地址
    39.                         router.push({ path: '/login', query: { name: '张三' } })
    40.                     }
    41.                 },
    42.                 router
    43.             })
    44.  
    45.  
    46.         </script>
    47.     </body>
    48.  
    49. </html>

    （2）参考代码：test9.html。params传参的方式。

    和query传参的不同点如下。

     

    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>Document</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.             <!-- 不用原先的router-link实现跳转 -->
    17.             <button @click="goLogin">点我去登录</button>
    18.             <router-view></router-view>
    19.         </div>
    20.  
    21.  
    22.         <script>
    23.             // 2.定义组件
    24.             var login = {
    25.                 template: '
      用户名：{{ $route.params.name }}
      '
    26.             }
    27.             // 3.创建路由对象
    28.             var router = new VueRouter({
    29.                 routes: [
    30.                     { path: '/login', name: 'login', component: login }
    31.                 ]
    32.             })
    33.             // 4.绑定路由
    34.             var vm = new Vue({
    35.                 el: '#app',
    36.                 methods: {
    37.                     goLogin() {
    38.                         // 点击route-link :to等同于下面的语句.掩藏了请求的地址
    39.                         router.push({ name: 'login', path: '/login', params: { name: '张三' } })
    40.                     }
    41.                 },
    42.                 router
    43.             })
    44.  
    45.  
    46.         </script>
    47.     </body>
    48.  
    49. </html>

    效果图：

     

    登录后的界面

     

    4.3router.replace()

    1.简介：router.replace()方法和router.push()方法类似，区别在于，为设置replace属性后，当单击时，就会调用router.replace()，导航后不会向history栈添加新的记录，而是替换当前的history记录。

    总之，不常用

    2.常见的两种声明的方式

     

    4.4router.go()

    1.简介：router.go()方法的参数是一个整数，表示在history历史记录中向前或者后退多少步，类似于window.history.go()。
    router.go(-1)相当于history.back()，表示后退一步，router.go(1)相当于history.forward()，表示前进一步，功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。

    4.4.1router.go()案例

    效果图：

     

    参考代码：test10.htnl

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4.   <head>
    5.     <meta charset="UTF-8">
    6.     <title>Document</title>
    7.     <script src="vue.js"></script>
    8.     <script src="vue-router.js"></script>
    9.   </head>
    10.  
    11.   <body>
    12.     <div id="app">
    13.       <button @click="goBack">后退</button>
    14.       <button @click="login">登录</button>
    15.       <router-view></router-view>
    16.     </div>
    17.     <script>
    18.       // 2.定义组件
    19.       var login = { template: '
      欢迎{{$route.params.name}}登录成功！
      '       }
    20.       // 3.创建路由
    21.       var router = new VueRouter({
    22.         routes: [
    23.           { path: '/login', name: 'login', component: login }
    24.         ]
    25.       })
    26.       // 3.绑定对象
    27.       var vm = new Vue({
    28.         el: '#app',
    29.         methods: {
    30.           goBack() {
    31.             router.go(-1)   // 使用router.go()进行后退操作
    32.           },
    33.           login() {
    34.             router.push({ name: 'login', params: { name: 'admin' } })
    35.           }
    36.         },
    37.         router
    38.       })
    39.     </script>
    40.   </body>
    41.  
    42. </html>
    43.  
    44.  
    45.

  • 相关阅读:
    linux中构建一个launch文件
    最近公共祖先 LCA
    学内核之七：问题三，全局变量加锁与每CPU变量
    深入理解计算机系统——第四章 Processor Architecture
    go -- 获取当前24点的时间戳 --chatGpt
    还担心接口乱糟糟？快来试试“斯瓦格”在线文档管理平台！
    基于稀疏约束的图像去噪算法研究（Matlab代码实现）
    java-net-php-python-springboot二手影音书籍交易平台计算机毕业设计程序
    Xilinx IDDR与ODDR原语的使用
    C/C++内存管理学习【new】
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127442763