路由配置案例

最新推荐文章于 2024-07-11 15:29:37 发布
最新推荐文章于 2024-07-11 15:29:37 发布
阅读量171 收藏
点赞数 4
分类专栏： VUE JS链接库 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46538844/article/details/133278158
版权

一、新增一个路由页面简单案例

  1. 创建文件

  • 源码：
<template>
    <div>
        <h1>Welcome to Your OnE</h1>
    </div>
</template>

<script>
export default {
    setup() {
        
        return {}
    }
}
</script>

<style lang="scss" scoped></style>
  1. 配置路由路径

  • 源码：
import { createRouter, createWebHashHistory } from "vue-router";
//引入路由对象
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    //默认展示，这是主页面同级路由加斜杠 /
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/one",
    //router-link跳转方式需要改变 变为对象并且有对应name
    name: "one",
    //路由懒加载
    component: () => import("../components/OnE.vue"),
  },
];

const router = createRouter({
  // 路由模式，共有两种模式，hash模式和history默认模式
  history: createWebHashHistory(),
  routes,
});

export default router;
  1. 配置路由出入口

  • 源码：
<template>
  <nav>
    <!-- 路由入口 -->
    <!-- router-link，将页面转成 a 标签 -->
    <!-- to 属性 指定 跳转的 路径 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/one">new</router-link>
  </nav>
  <!-- 路由出口 -->
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
  • 运行结果：

二、路由页面跳转简单案例

  1. 配置路由路径

  • 源码：
import { createRouter, createWebHashHistory } from "vue-router";
//引入路由对象
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    //默认展示，这是主页面同级路由加斜杠 /
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/one",
    //router-link跳转方式需要改变 变为对象并且有对应name
    name: "one",
    //路由懒加载
    component: () => import("../components/OnE.vue"),
  },
    {
    path: "/two",
    //router-link跳转方式需要改变 变为对象并且有对应name
    name: "two",
    //路由懒加载
    component: () => import("../components/TwO.vue"),
  },
];

const router = createRouter({
  // 路由模式，共有两种模式，hash模式和history默认模式
  history: createWebHashHistory(),
  routes,
});

export default router;
  1. 配置路由入口

  • 运行结果

三、注册页面跳转

  1. 创建文件

  1. 配置路由路径

  • v2源码：
<template>
 <div class="register">
    <div class="register-form">
      <h2 class="register-title">注册</h2>
      <div class="register-input">
        <input v-model="username" type="text" placeholder="请输入用户名" />
      </div>
      <div class="register-input">
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
      <div class="register-input">
        <input v-model="confirmPassword" type="password" placeholder="请确认密码" />
      </div>
      <div class="register-actions">
        <button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
        <button class="register-btn" v-if="step === 2" @click="finish">完成</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      step: 1,
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    nextStep() {
      // 验证用户名、密码和确认密码是否为空
      if (this.username.trim() === '' || this.password.trim() === '' || this.confirmPassword.trim() === '') {
        alert('用户名、密码和确认密码不能为空！');
        return;
      }
      // 验证密码是否相同
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }
      // 进入第二步
      this.step = 2;
    },
    finish() {
      // 保存用户信息
      const userInfo = {
        username: this.username,
        password: this.password
      };
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      // 注册成功后跳转到首页
      this.$router.push('/');
    }
  }
}
</script>
<style scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-form {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.register-input {
  margin-bottom: 20px;
}
.register-input input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
}
.register-input input:focus {
  outline: none;
  border-bottom: 2px solid #007aff;
}
.register-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007aff;
  color: #fff;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
.register-btn:focus {
  outline: none;
}
@media screen and (max-width: 767px) {
  .register-form {
    max-width: 320px;
  }
  .register-title {
    font-size: 18px;
  }
  .register-input input {
    font-size: 14px;
  }
  .register-btn {
    font-size: 14px;
    padding: 8px 16px;
  }
}
</style>
  • v3源码：
<template>
    <div class="register">
        <div class="register-form">
            <h2 class="register-title">注册</h2>
            <div class="register-input">
                <input v-model="username" type="text" placeholder="请输入用户名" />
            </div>
            <div class="register-input">
                <input v-model="password" type="password" placeholder="请输入密码" />
            </div>
            <div class="register-input">
                <input v-model="confirmPassword" type="password" placeholder="请确认密码" />
            </div>
            <div class="register-actions">
                <button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
                <button class="register-btn" v-if="step === 2" @click="finish">完成</button>
            </div>
        </div>
    </div>
</template>
<script >
import router from '@/router';
import { ref } from 'vue'
export default {
    setup() {
        const username = ref('')
        const password = ref('')
        const confirmPassword = ref('')
        const step = ref(1)
        const nextStep = () => {
            // 验证用户名、密码和确认密码是否为空
      if (username.value.trim() === '' || password.value.trim() === '' || confirmPassword.value.trim() === '') {
        alert('用户名、密码和确认密码不能为空！');
        return;
      }
      // 验证密码是否相同
      if (password.value !== confirmPassword.value) {
        alert('两次输入的密码不一致！');
        return;
      }
      // 进入第二步
      step.value = 2;
        }
        const finish = () => {
             // 保存用户信息
      const userInfo = {
        username: username.value,
        password: password.value
      };
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      // 注册成功后跳转到首页
      router.push('/');
        }
        return {
            username,
            password,
            confirmPassword,
            step,
            nextStep,
            finish
        }
    },
}
</script>
<style scoped>
.register {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-form {
    width: 80%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.register-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.register-input {
    margin-bottom: 20px;
}

.register-input input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #ccc;
}

.register-input input:focus {
    /* outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 */
    outline: none;
    border-bottom: 2px solid #007aff;
}

.register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007aff;
    color: #fff;
    border-radius: 20px;
    border: none;
    /* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
    /* pointer光标呈现为指示链接的指针（一只手） */
    cursor: pointer;
}

.register-btn:focus {
    outline: none;
}

@media screen and (max-width: 767px) {
    .register-form {
        max-width: 320px;
    }

    .register-title {
        font-size: 18px;
    }

    .register-input input {
        font-size: 14px;
    }

    .register-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}
</style>
  • 语法糖源码：
<template>
    <div class="register">
        <div class="register-form">
            <h2 class="register-title">注册</h2>
            <div class="register-input">
                <input v-model="username" type="text" placeholder="请输入用户名" />
            </div>
            <div class="register-input">
                <input v-model="password" type="password" placeholder="请输入密码" />
            </div>
            <div class="register-input">
                <input v-model="confirmPassword" type="password" placeholder="请确认密码" />
            </div>
            <div class="register-actions">
                <button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
                <button class="register-btn" v-if="step === 2" @click="finish">完成</button>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const step = ref(1)
const nextStep = () => {
    // 验证用户名、密码和确认密码是否为空
    if (username.value.trim() === '' || password.value.trim() === '' || confirmPassword.value.trim() === '') {
        alert('用户名、密码和确认密码不能为空！');
        return;
    }
    // 验证密码是否相同
    if (password.value !== confirmPassword.value) {
        alert('两次输入的密码不一致！');
        return;
    }
    // 进入第二步
    step.value = 2;
}
const finish = () => {
    // 保存用户信息
    const userInfo = {
        username: username.value,
        password: password.value
    };
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    // 注册成功后跳转到首页
    router.push('/');
}
</script>
<style scoped>
.register {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-form {
    width: 80%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.register-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.register-input {
    margin-bottom: 20px;
}

.register-input input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #ccc;
}

.register-input input:focus {
    /* outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 */
    outline: none;
    border-bottom: 2px solid #007aff;
}

.register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007aff;
    color: #fff;
    border-radius: 20px;
    border: none;
    /* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
    /* pointer光标呈现为指示链接的指针（一只手） */
    cursor: pointer;
}

.register-btn:focus {
    outline: none;
}

@media screen and (max-width: 767px) {
    .register-form {
        max-width: 320px;
    }

    .register-title {
        font-size: 18px;
    }

    .register-input input {
        font-size: 14px;
    }

    .register-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}
</style>
  • 运行结果：

 

 

 

 

 

 

白鹿依山.12138
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为（huawei）多协议路由引入之RIP&OSPF路由引入配置案例演示
zsisle的博客
08-15 1423
在网络接入配置中，经常会有两个或者多个不同网络之间需要数据接入互通，如果不同网络之间使用的路由协议不同，那么两者之间就需要引入路由协议来达到业务互通的目的。本配置案例演示不同路由协议rip和ospf之间的路由引入，同理，在看了本案例，也可以思索如何在其他路由协议之间相互引入，比如ospf和isis之间等等。...
局域网中代理服务器、路由器的配置案例
蓝木屋
12-28 2349
 http://www.ccw.com.cn 李国庆 朱建伟 网络技术的飞速发展，使企事业单位局域网接入INTERNET共享资源的方式越来越多，就大多数而言，DDN专线以其性能稳定、扩充性好的优势成为普遍采用的方式，DDN方式的连接在硬件的需求上是简单的，仅需要一台路由器（router）、代理服务器(proxy server)即可，但在系统的配置上对许多的网络管理人员来讲是一个比较棘手的问题。下面
【案例分享】策略路由典型配置
XMWS-IT
07-19 2144
由于Telnet使用的是TCP协议，ping使用的是ICMP协议，所以由以上结果可证明从RouterA的以太网接口GigabitEthernet1/0/1接收的TCP报文的下一跳为1.1.2.2，接口GigabitEthernet1/0/3不转发TCP报文，但可以转发非TCP报文，策略路由设置成功。(1)配置IP地址和单播路由协议，确保RouterB和HostA/HostB，RouterC和HostA/HostB之间路由可达，具体配置过程略。......
[HCNA] 静态路由配置实例
weixin_42728126的博客
01-21 6360
公司的子公司要与总公司搭建网络，使得2个不同网段通信，中间三台路由。
路由策略简介、配置举例
weixin_45059947的博客
12-05 2003
定义路由策略主要实现了路由过滤和路由属性等设置功能，他通过改变路由属性（包括可达性）来改变网络流量所经过的路径。目的优势路由协议在发布、接收和引入路由信息时，根据实际组网需求实施一些策略，以便对路由信息进行过滤和改变路由信息的属性，如：控制路由的接收和发布只发布和接收必要、合法的路由信息，以控制路由表的容量，提高网络的安全性。控制路由的引入在一种路由协议引入其它路由协议发现的路由信息丰富自己的路由信息时，只引入一部分满足条件的路由信息。设置特定路由的属性修改通过路由策略过滤的路由的属性，满足自身需要。通过控
H3C单臂路由基础配置案例
04-18
总结来说，H3C单臂路由配置涉及的关键点有：VLAN划分、Trunk接口设置、子接口创建以及802.1Q VLAN标签的封装。理解并熟练掌握这些步骤，对于网络工程师来说至关重要，因为这将使他们能够有效地管理和扩展网络，实现...
【路由配置详解及案例】路由配置详解及案例路由配置详解及案例
05-24
路由配置路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解及案例路由配置详解...
thinkphp的URL路由规则与配置实例
10-25
主要介绍了thinkphp的URL路由规则与配置方法,实例分析了ThinkPHP的路由规则及伪静态设置方法,并分析了相关的注意事项,是ThinkPHP开发中非常重要的技巧,需要的朋友可以参考下
H3C 7500E 三层策略路由配置实例
09-18
H3C S7500E 三层策略路由配置实例，三层技术，IP路由配置
H3C_静态路由基础配置案例
04-15
H3C_静态路由基础配置案例，原创文档。 适用于H3CV7版本的网络设备，包括交换机、路由器等。 搭建环境为HCL3.0.1，适用于刚入门的网络工程师学习参考。
H3C——路由引入和路由过滤配置实例
weixin_33910434的博客
01-05 1076
配置如下： [R1]int s0/2/0 [R1-Serial0/2/0]ip add 10.1.12.1 30 [R1-Serial0/2/0]int lo0 [R1-LoopBack0]ip add 1.1.1.1 32 [R1-LoopBack0]int lo1 [R1-LoopBack1]ip add 192.168.1.100 ...
H3C_OSPF多区域配置及默认路由引入的部署案例
zsisle的博客
08-24 2329
在规划一些多分支公司的网络时，通常会使用ospf动态路由协议来划分不同区域。在本案例中，将会学习及了解ospf多区域的配置及如何将默认路由引入ospf动态协议中。
【基础大全】一文带你打好网工路由基础......
XMWS-IT
06-11 395
01 所谓路由，就是指导IP数据报文转发的路径 通过路由条目，生成路由表，根据路由表中的条目，进行路径选择。 路由表存储在RAM中，掉电丢失，加电重新装载计算。 路由分类： 直连路由 //通过接口感知到的直连 (网络接口配置IP，并且该接口的物理层及链路层状态为UP) 静态路由 //使用静态路由命令手工配置的路由 动态路由 //路由器之间动态学习到的路由表 动态路由协议：RIP、EIGRP、IS-IS、OSPF、BGP 路由选择原理： ...
【ENSP模拟器】路由基础（HCNP）——静态路由与BFD联动
Dragon的博客
05-14 2308
目录 案例1：静态路由与BFD联动 实验1 主机的配置 R1的配置 R2的配置 R3的配置 验证（主机pingR3，R3ping主机） BFD-R1的配置 BFD-R2的配置 实验2 主机PC1的配置 主机PC2的配置 BFD-R1的配置 R2的配置 BFD-R3的配置 本篇就是介绍静态的配置 案例1：静态路由与BFD联动 实验1 在 实验1 中，我会将静态路由与BFD联动的东西讲解清楚。 静态路由配置起来非常方便、简单，然而其短板也是非常明显的——它无法根据拓 扑的
静态路由的简单案例（华为），一看就会
weixin_47556601的博客
05-09 4404
大家好，今天给大家分享一下静态路由的简单案例 在这之前，我们来看一下上次的拓扑图 我们上一次 实现了pc1和pc2的相互通信 在这个案例当中 lsw1 和lsw2 你可以直接将他俩划掉（就是当他俩不存在） 那么，在pc1 和pc2通信的这条路上，你会发现，pc1和pc2之间就隔了一个路由器，我们也可以称pc1和pc2 之间经过了“一跳” 进而，我们 我们就产生了一个问题： 即： 如果pc1 和pc 2之间有2个或者多个路由器，那个时候，我们将如何使pc1和pc2可以通信 这就是我们静态
OSPF外部路由引入基本配置
weixin_39041972的博客
02-21 1万+
R1: interface GigabitEthernet0/0/0 ip address 192.168.12.1 255.255.255.0 interface GigabitEthernet0/0/1 ip address 192.168.14.1 255.255.255.0 interface GigabitEthernet0/0/2 ip address 192.168.15.1...
双点双向路由引入案例
wfighr2468的博客
07-16 4191
双点双向路由引入案例： 在大型复杂的IP网络中,会存在多种路由协议,为了是网络中路径互通,必然会在多种协议之间进行重分布使路由信息的共享.在进行多点双向重分布时,由于路由协议优先级的不同,会引起次优路径的问题。 首先我们搭建一个如图所示的拓扑： 右边网络使用ospf协议，左边使用isis协议，R3和R4连接的链路即运行ospf，也运行isis，实现在各自网络中达到路由互通。 第一步、在AR1、AR2、AR3、AR4上配置OSPF： 第二步、在AR3、AR4、AR5、A...
路由引入原理与配置
热门推荐
weixin_45361917的博客
09-12 1万+
路由引入 一个网段进入路由协议方法： 宣告 ---协议内部路由 直连 路由引入 其他路由协议路由 （ 将外部路由协议引入内部路由协议，将内部路由协议重发布置外部路由协议） 动态路由协议可以把其他路由协议的路由进行引入操作 ​ 直连 ---不能引入 ​ 静态 ---不能引入 动态 ---可以引入其他 引入的命令 （先进入内部或外部路由协议再进行重发布） import-route...
Node多版本管理器NVM安装使用
最新发布
GongWeiBuQi的博客
07-11 176
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
ensp交换机路由配置案例
11-11
ensp交换机路由配置案例是指在华为ensp仿真平台上进行交换机路由配置的实例。以下是一个300字的回答。 在ensp交换机路由配置案例中，首先需打开ensp仿真平台，并选择合适的交换机设备。然后创建VLAN，将不同的接口...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值