前端路由原理与使用

1.前端路由原理

通过window.onhashchange事件监听路由链接(也就是锚点链接)改变地址栏hash值的变化而改变动态组件is属性在data数据源里面的值。

通俗的说当我们点击锚点链接会改变地址栏hash值,则window.onhashchange会监听到这个值的变化,从而改变对动态组件is属性绑定的值进行更改从而切换不同的组件

<template>
  <div id="app2">
    <h3>App根组件(基于前端路由切换动态组件)</h3>
    //锚点链接改变地址栏hash值
    <a href="#home2">首页</a>
    <a href="#main2">内容区</a>
    <a href="#bottom2">底部</a>
    //动态组件,is属性默认呈现home2组件
    <component :is="comName"></component>
  </div>
</template>

<script>
//导入需要的组件
import Home2 from "./components/Home2.vue";
import Main2 from "./components/Main2.vue";
import Bottom2 from "./components/Bottom2.vue";
export default {
  data() {
    return {
      comName: "Home2",
    };
  },
  components: {
    Home2,
    Main2,
    Bottom2,
  },
  // 通过created生命周期函数监听地址栏hash值变化
  created() {
    window.onhashchange = () => {
      //通过地址栏对应的hash值展现对应的组件
      switch (location.hash) {
        case "#home2":
          this.comName = "Home2";
          break;
        case "#main2":
          this.comName = "Main2";
          break;
        case "#bottom2":
          this.comName = "Bottom2";
          break;
      }
    };
  },
};
</script>

<style scoped>
#app2 {
  min-height: 600px;
  border: 1px solid #ccc;
  margin: auto;
}
a {
  display: inline-block;
  min-width: 30px;
  min-height: 20px;
  margin: 0 10px;
  text-align: center;
  text-decoration: none;
  color: skyblue;
}
</style>

2.前端路由使用

1.下载vue-router(vue-router是vue官方为我们提供的前端路由解决方案,我们只需要指定路由链接即可)

npm i vue-router -S

2.在src->router->index.js下创建路由模块并指定路由链接

//src->router->index.js

//导入vue与vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入需要的组件
import Home from '../components/Home.vue'
import Main from '../components/Main.vue'
import Bottom from '../components/Bottom.vue'
//将vue-router插件挂载到Vue上
Vue.use(VueRouter)
//创建vue-router实例
const router = new VueRouter({
  //routes是一个数组,里面存放路由链接与组件的对应关系
  routes: [
    //path表示hash值,component表示对应的组件
    { path: '/home', component: Home },
    { path: '/main', component: Main },
    { path: '/bottom', component: Bottom },
    //路由重定向
    { path: '/', component: Home },
    //默认路由(作用与路由重定向相同)
    { path: '', component: Home }
  ]
})
//暴露vue-router实例
export default router

3.在main.js导入并挂载路由模块

//--->main.js

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 挂载路由模块 router:router实例对象
  router:router
}).$mount('#app')

4.在根组件中放入 <router-link to='home'></router-link>(相当于原理中的a链接,但是相对于a链接不需要代#号)与<router-view></router-view>占位符标签(相当于原理中的component)

//--->App.vue

<template>
  <div id="app">
    <h3>vue-router</h3>
    <hr />
    <router-link to="/home">首页</router-link>
    <router-link to="/main">内容</router-link>
    <router-link to="/bottom">底部</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#app {
  min-height: 600px;
  border: 1px solid #ccc;
}
</style>

 3.嵌套路由

续写上一个例子,在main组件中增加电影与游戏组件

//--->Main.vue
<template>
  <div id="main">
    <h3>内容</h3>
    <!-- 路由链接 -->
    <router-link to="/main/mov">电影</router-link>
    <router-link to="/main/tig">游戏</router-link>
    <!-- 占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#main {
  min-height: 300px;
  background-color: pink;
}
</style>

在index.js增加路由链接

//--->index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import Main from '../components/Main.vue'
import Bottom from '../components/Bottom.vue'
import Mov from '../components/Mov.vue'
import Tig from '../components/Tig.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    {
      path: '/main',
      component: Main,
      //在父组件对应的路由链接增加children属性进行路由嵌套
      children: [
        //子组件路由链接,不要加/ 例如/mov
        { path: 'mov', component: Mov },
        { path: 'tig', component: Tig },
        //默认路由
        { path: '', component: Mov }
        //路由重定向
        // { path: '/main', redirect: '/main/mov' }
      ]
    },
    { path: '/bottom', component: Bottom },
    // { path: '/', redirect: '/home' },
    { path: '', component: Home },
  ]
})
export default router

4.动态路由

他算是前端路由的一个优化,不仅可以提高路由规则的复用,还可以提高组件的复用,就好比之前的五个路由对应五个组件,动态路由只需要一条路由规则和一个组件就可以完成,即在一个组件内完成不同内容的展现

续写上一个例子,在Mov组件中增加两条路由链接,但是他们都对应一个Movs组件

//--->Mov.vue
<template>
  <div id="mov">
    <h3>电影</h3>
    <router-link to="/main/mov/1s">熊出没</router-link>
    <router-link to="/main/mov/2s">喜羊羊与灰太狼</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#mov {
  min-height: 200px;
  background-color: gray;
  margin: 10px;
}
</style>


//--->index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import Main from '../components/Main.vue'
import Bottom from '../components/Bottom.vue'
import Mov from '../components/Mov.vue'
import Tig from '../components/Tig.vue'
import Movs from '../components/Movs.vue'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    {
      path: '/main',
      component: Main,
      //在父组件对应的路由链接增加children属性进行路由嵌套
      children: [
        //子组件路由链接,不要加/ 例如/mov
        {
          path: 'mov',
          component: Mov,
          children: [
            {
              //使用英文的(:)来定义路由的参数项
              path: ':id',
              component: Movs,
              //开启props传参,就可以在对应的组件中拿到这个参数项
              props: true
            },
          ]
        },
        { path: 'tig', component: Tig },
        //默认路由
        { path: '', component: Mov }
        //路由重定向
        // { path: '/main', redirect: '/main/mov' }
      ]
    },
    { path: '/bottom', component: Bottom },
    // { path: '/', redirect: '/home' },
    { path: '', component: Home },
  ]
})
export default router

接下来就可以在对应的组件中拿到这个传过来的参数项

<template>
  <div id="movs">
    //1.通过this.$route.params.id获取不同链接后面的参数项(:id)
    <p>电影{{ this.$route.params.id }}--{{ id }}</p>
    <button @click="show">打印</button>
  </div>
</template>

<script>
export default {
  //2.为路由规则添加props:true就可以在组件中访问自定义属性props获取这个参数项
  props: ["id"],
  methods: {
    show() {
      console.log(this);
      // console.log(this.id);
    },
  },
};
</script>

<style scoped>
#movs {
  min-height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin: 10px;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Django 网页Web开发】22. 实战项目:简单的文件上传(15)(保姆级图文)

目录实现效果1. url.py2. upload_list.html3. upload.py总结欢迎关注 『Django 网页Web开发』 系列&#xff0c;持续更新中 欢迎关注 『Django 网页Web开发』 系列&#xff0c;持续更新中 实现效果 1. url.py path(upload/list/, upload.upload_list),2. upload_list.html {% e…

Python中进程和线程到底有什么区别?

人生苦短&#xff0c;我用python python 安装包资料:点击此处跳转文末名片获取 一、进程和线程的关系 线程与进程的区别可以归纳为以下4点&#xff1a; 地址空间和其它资源&#xff08;如打开文件&#xff09;&#xff1a;进程间相互独立&#xff0c;同一进程的各线程间共享。…

操作系统(2.6)--进程通信

进程通信是指进程之间的信息交换。 在进程之间要传送大量数据时&#xff0c;应当利用OS提供的高级通信工具&#xff0c;该工具最主要的特点是: (1)使用方便。OS隐藏了实现进程通信的具体细节&#xff0c;向用户提供了一组用于实现高级通信的命令(原语)&#xff0c;用户可方便地…

ThreeJS-太阳球围绕旋转(二十四)

数学小知识&#xff1a; 我们根据旋转角度θ可以计算出任意时刻的x,y sinθ y0/r; 因此y0 rsinθ, cosθ x0/r,因此x0 rcosθ, 小拓展&#xff1a; y0^ x0^ - r^2*sinθ^2 r^2*cosθ^2 r^2*(sinθ^2 cosθ^2) r^2; 这也是为什么在极坐标方程中 y0 rsinθ, x0 rcos…

15_I.MX6ULL_LCD显示原理

目录 LCD简介 分辨率 像素格式 LCD屏幕接口 LCD时间参数 RGB LCD屏幕时序 像素时钟 显存 LCD简介 LCD全称是Liquid Crystal Display,也就是液晶显示器,是现在最常用到的显示器,手机、电脑、各种人机交互设备等基本都用到了LCD,最常见就是手机和电脑显示器了。LCD的构造…

帮公司面试了一个32岁的程序员,只因这一个细节,被我一眼看穿是培训班出来的,没啥工作经验...

首先&#xff0c;我说一句&#xff1a;培训出来的&#xff0c;优秀学员大有人在&#xff0c;我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配&#xff0c;是非常遗憾的事情。 最近&#xff0c;在网上看到这样一个留言&#xff0c;引发了程序员这个圈子不少的…

ChatGPT全球大封号!数10万企业停摆:第一批玩AI的人,被AI给玩了

观点| Mr.K 主笔| Wendy.L 编辑| Emma来源| 技术领导力(ID&#xff1a;jishulingdaoli)3月31日&#xff0c;Open AI就开始无征兆的进行全球大封号&#xff0c;其中亚洲是重灾区&#xff0c;官方没有给出任何声明&#xff0c;具体原因不得而知。并且暂停了这些地区新账号的注…

【从零开始学习 UVM】6.4、UVM 激励产生 —— uvm_do 宏详解

请注意,start方法的call_pre_post字段设置为0,这意味着在使用这些序列宏时,序列的pre_body和post_body方法将永远不会被调用。否则,执行流程与通过start方法执行序列时类似。 文章目录 执行序列宏介绍Example执行序列宏介绍 使用序列宏的优点是可以使用内联约束,但是您失…

实验一 跨VLAN访问

目录 一、按照拓扑图配置VLAN&#xff0c;并实现跨VLAN间的访问。 二、实验环境 三、实验步骤 一、按照拓扑图配置VLAN&#xff0c;并实现跨VLAN间的访问。 1、配置好交换机的VLAN和各个终端的地址&#xff0c;实现各个VLAN内能连通。 2、开启两个交换机的VTY连接&#xff0…

基于STM32F103——XGZP6847D压力传感器+串口打印

基于STM32F103—XGZP6847D压力传感器串口打印基本介绍概述产品特点引脚的连接 (IIC通信)名称含义的介绍I2C通信协议 (设备地址是 0x6D)寄存器描述工作模式寄存器Reg0x30&#xff08;测量命令寄存器&#xff09;Reg0xA5Reg0xA6模式说明组合数据采集模式休眠数据采集模式代码编写…

MyBatisPlus

今日目标基于MyBatisPlus完成标准Dao的增删改查功能掌握MyBatisPlus中的分页及条件查询构建掌握主键ID的生成策略了解MyBatisPlus的代码生成器1&#xff0c;MyBatisPlus入门案例与简介这一节我们来学习下MyBatisPlus的入门案例与简介&#xff0c;这个和其他课程都不太一样&…

[CF复盘] Codeforces Round 863 (Div. 3) 20230404

[TOC]([CF复盘] Codeforces Round 863 (Div. 3) 20230404 ) 一、本周周赛总结 做到E&#xff0c;但DE都TLE&#xff0c;很难受。 A 贪心。 B 坐标运算。 C 贪心构造。 D 分治DFS。 E 九进制模拟。 二、 A. Insert Digit 链接: A. Insert Digit 1. 题目描述 2. 思路分析…

skimage.filters.apply_hysteresis_threshold详解

本文内容均参考scipy1.9.1scipy1.9.1scipy1.9.1版本的源码&#xff0c;若有任何不当欢迎指出 我们截取官方注释如下&#xff1a; def apply_hysteresis_threshold(image, low, high):"""Apply hysteresis thresholding to image.This algorithm finds regions …

RabbitMQ中TTL

目录一、TTL1.控制后台演示消息过期2.代码实现2.1 队列统一过期2.2 消息过期一、TTL TTL 全称 Time To Live&#xff08;存活时间/过期时间&#xff09;。 当消息到达存活时间后&#xff0c;还没有被消费&#xff0c;会被自动清除。 RabbitMQ可以对消息设置过期时间&#xff0…

QT与Halcon联编应用开发-设置软件图标Icon

VS+Qt应用开发-设置软件图标 设置软件exe图标设置运行时标题栏和任务栏图标默认的Qt是没有图标的,如下图所示,可以在Qt应用程序发布时和应用程序运行时给应用程序加上图标。 任务栏图标: 软件左上角图标 可执行程序图标

原来count(*)是接口性能差的真凶

以下文章来源于苏三说技术 &#xff0c;作者苏三呀 一.前言 最近我在公司优化过几个慢查询接口的性能&#xff0c;总结了一些心得体会拿出来跟大家一起分享一下&#xff0c;希望对你会有所帮助。 我们使用的数据库是Mysql8&#xff0c;使用的存储引擎是Innodb。这次优化除了优…

通过Chrome打开IE浏览器并跳转到指定页面并传递参数

通过Chrome打开IE浏览器并跳转到指定页面并传递参数 方式一&#xff1a;通过浏览器打开ie浏览器&#xff08;可以换做其他应用&#xff09;&#xff0c;跳转到指定页面&#xff08;方式一只支持单个参数&#xff09; 1、新建alert.reg Windows Registry Editor Version 5.00…

IOC/DI的注解开发

IOC/DI注解开发3&#xff0c;IOC/DI注解开发3.1 环境准备3.2 注解开发定义bean步骤1:删除原XML配置步骤2:Dao上添加注解步骤3:配置Spring的注解包扫描步骤4&#xff1a;运行程序步骤5:Service上添加注解步骤6:运行程序知识点1:Component等3.2 纯注解开发模式3.2.1 思路分析3.2.…

https和ssl网关在各安全层面的应用场景及测评要点

1、https和https实现 SSL/TLS协议是独立的概念&#xff08;这里的重点是https和ssl v**&#xff0c;关于ssl/tls协议就不展开说了&#xff09;&#xff0c;可以实现对基于TCP/UDP应用的安全保护&#xff0c;如https和sftp等。 https是其中应用非常广泛的一种&#xff0c;即Hype…

RocketMQ 5.1 NameServer 启动流程

文章目录1 解析命令行参数和配置文件2 创建并启动 NamesrvController2.1 创建 NamesrvController 对象2.2 启动 NamesrvController 对象第一步&#xff1a;初始化 controller第二步&#xff1a;注册 JVM 钩子第二步&#xff1a;启动 controllerRocketMQ是一个分布式消息中间件&…
最新文章