单页面与路由

news2024/11/23 17:06:32

目录

（一）什么是SPA应用？

（二）路由

（1）什么是路由？

（2）路由的分类

（3）路由的安装和使用

（三）、路由的使用

（1）基本路由(单级路由)

(2)路由的嵌套（多级路由）

（四）路由传参

（1）query参数

（2）params参数

（五）、路由的props配置

（六）路由的跳转

（1）中的push和replace属性

（2）编程式路由导航

（七）缓存路由组件

（1）作用

（2）具体编码

（八）两个新的声明周期钩子

（1）作用

（2）具体名字

（一）什么是SPA应用？

  • 单页web应用（single page web application ）
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  • 数据需要通过ajax请求

（二）路由

（1）什么是路由？

一个路由就是一组映射关系（key-value)

key为路径，value可能是function或component

（2）路由的分类

1、后端路由

理解：value是function ，用于处理客户端提交的请求

工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数处理请求，返回响应数据

2、前端路由

理解：value是component，用于展示页面内容

工作过程：当浏览器的路径改变时，对应的组件就会显示

（3）路由的安装和使用

1、路由的安装

npm install vue-router@3

2、路由的使用步骤

  1. 创建路由组件
  2. 配置路由映射，组件和路径映射关系
  3. 使用路由：通过<router-link>和<router-view>

3、注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2.通过切换，"隐藏"了的路由组件，默认是被销毁掉的。需要的时候再去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的$router属性获取到。

（三）、路由的使用

（1）基本路由(单级路由)

点击左边的导航栏，右边呈现对应的内容，但页面不进行刷新，也不会重新开页面，页面路径会发生变化，页面的样式是通过引入bootstrap.css实现的

1、App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					
					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

2、Abount.vue

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
	}
	
</script>

3、Home.vue

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
	}
	
</script>

4、main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

5、index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

6、浏览器展示

 

(2)路由的嵌套（多级路由）

在基本路由的基础上，在Home路由组件中嵌套News和Message路由组件，注意多级路由router-link中的路径要写完整路径（Home路由组件中）。

1、News.vue

<template>
  <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
export default {

}
</script>

2、Message.vue

<template>
  <div>
        <ul>
            <li>
                <a href="/message1">message001</a>&nbsp;&nbsp;
            </li>
            <li>
                <a href="/message2">message002</a>&nbsp;&nbsp;
            </li>
             <li>
                <a href="/message/3">message003</a>&nbsp;&nbsp;
            </li>
             </ul>
        </div>
</template>

<script>
export default {

}
</script>

3、index.js添加子路由的配置

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		// 配置路由，一级路由，路由里面若嵌套路由则为2级，配置好用再用
		{
			path:'/about',
			component:About,
			
		},
		{
			path:'/home',
			component:Home,
			children:[
				// 子路由路径不用加/
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			],
			
		}
	]
})

4、在Home组件中用router-link使用路由

<template>
	  <div>
              <h2>Home组件内容</h2>
              <div>
                <ul class="nav nav-tabs">
                  <li>
					<!-- 所用到的组件在父组件中用<router-link></router-link>进行配置 -->
                    <router-link class="list-group-item active" active-class="active" to="/home/news">News</router-link>
                  </li>
                  <li>
                    <router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link>
                  </li>
                </ul>
                <router-view></router-view>
              </div>
            </div>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

其他地方均不变

5、效果图

（四）路由传参

（1）query参数

1、传参（父组件中）

写法一：字符串写法

<router-link  :to="`/home/message/detail?id=${message.id}&title=${message.title}`">{{message.title}}</router-link>

写法二：对象写法

 <router-link  :to="{

                path:'/home/message/detail',

                query:{

                    id:message.id,

                    title:message.title

                }

             }">

                {{message.title}}

                </router-link>

2、被用到的组件接收参数

        <li>消息编号：{{$route.query.id}}</li>

        <li>消息标题：{{$route.query.title}}</li>

（2）params参数

1、配置路由，声明接收params参数（router下的index.js）

children:[

                        {

                        name:'xiangqing',

                        path:'detail/:id/:title',

                        component:Detail,

                        }

                       

                    ]

2、传递参数

方法一：字符串写法

<router-link  :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link>

方法二：对象写法

<router-link  :to="{

                name:'xiangqing',

                params:{

                    id:message.id,

                    title:message.title

                }

             }">

                {{message.title}}

                </router-link>

 3、接收参数

 <li>消息编号：{{$route.params.id}}</li>

 <li>消息标题：{{$route.params.title}}</li>

（五）、路由的props配置

作用：为了让组件更好的收到参数

props的配置有三种写法，对象，布尔值，函数，最后一种方法最常用

children:[

                        {

                        name:'xiangqing',

                        path:'detail/:id/:title',

                        component:Detail,

                        // 第一种写法：props的对象写法，该对象中所有的key-value的组合最终通过props传给所写的组件

                        // props:{a:1,b:'hello'}

                        // 第二种写法：props的布尔值写法，若值为true，则把路由收到的所有params参数通过props传递给所写的组件

                        // props:true

                        // props的第三种写法，值为函数，该函数返回的对象中所有的key-value的组合最终通过props传给所写的组件

                        props($route){

                            return {

                                id:$route.query.id,

                                title:$route.query.title

                            }

                        }

                        }

                    ]

（六）路由的跳转

（1）<router-link>中的push和replace属性

1、作用：控制路由跳转时操作浏览器历史记录模式

2、浏览器的历史记录写入模式有两种方式：分别为push和replace,push是追加历史记录，replace是替换当前记录，路由跳转的时候默认为push

3、如何开启replace模式，在<router-link>中加入属性replace

<router-link  replace :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link>

（2）编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

具体编码

//$router的两个API

this.$router.push({

                name:'xiangqing',

                params:{

                    id:message.id,

                    title:message.title

                }

      })

this.$router.replace({

                name:'xiangqing',

                params:{

                    id:message.id,

                    title:message.title

                }

         })

//后退

 this.$router.back()

//前进

 this.$router.forward()

//可前进可后退，参数为前进或后退几步

 this.$router.go(2)

（七）缓存路由组件

（1）作用

让不展示的路由保持挂载，不被销毁。

（2）具体编码

 <keep-alive include="News">

                  <router-view></router-view>

 </keep-alive>

注意：要明白展示的路由组件展示在哪个路由里面，将<keep-live>包裹在展示路由的外侧，注意include表示要挂载哪个组件，里面写的为组件名。如果想挂载多个 组件，则用:include='['组件名1','组件名2']'，数组的形式

（八）两个新的声明周期钩子

（1）作用

路由组件所独有的两个钩子，用于捕获路由组件的激活状态

（2）具体名字

 1、activated路由组件被激活时触发

2、deactivated路由组件失活时触发

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

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

相关文章

微服务 - 搭建Consul集群服务，Consul配置中心

微服务 - 搭建Consul集群服务，Consul配置中心

传统配置文件的弊端 静态化配置&#xff0c;例如env文件配置文件无法区分环境配置文件过于分散历史版本无法查看 配置中心如何解决的呢?配置中心的思路是把项目中的配置参数全部放在一个集中的地方来管理&#xff0c;并提供一套标准的接口&#xff0c;当各个服务需要获取配置…
阅读更多...
d2l 使用attention的seq2seq

d2l 使用attention的seq2seq

这一章节与前面写好的function关联太大&#xff0c;建议看书P291. 这章节主要讲述了添加attention的seq2seq,且只在decoder里面添加&#xff0c;所以全文都在讲这个decoter 目录 1.训练 2.预测 1.训练 #save class AttentionDecoder(d2l.Decoder):"""带有注…
阅读更多...
HTTP与HTTPS相关介绍（详细）

HTTP与HTTPS相关介绍（详细）

HTTP与HTTPS相关介绍 HTTP与HTTPS简述HTTPS和HTTP的区别主要如下HTTPS的工作原理前言工作步骤总结 HTTPS的缺点SSL与TLSSSL&#xff1a;TLS&#xff1a;TLS和SSL的关系 对称加密与非对称加密对称加密非对称加密 HTTP与HTTPS简述 超文本传输协议&#xff08;Hyper Text [Transf…
阅读更多...
如何无侵入地引入第三方组件？

如何无侵入地引入第三方组件？

做java开发的小伙伴都知道&#xff0c;java的生态比较繁荣&#xff0c;有各种各样的第三方组件来满足我们日常的开发需求。很多常用的中间件(redis&#xff0c;kafka等)都提供java的开发接口&#xff0c;而且这些接口通常会被封装成比较好用的组件来满足我们使用这些中间件的场…
阅读更多...
SpringBoot集成MyBatis-yml自动化配置原理详解

SpringBoot集成MyBatis-yml自动化配置原理详解

SpringBoot集成MyBatis-yml自动化配置原理详解 简介&#xff1a;spring boot整合mybatis开发web系统目前来说是市面上主流的框架&#xff0c;每个Java程序和springboot mybatis相处的时间可谓是比和自己女朋友相处的时间都多&#xff0c;但是springboot mybatis并没有得到你的真…
阅读更多...
RabbitMQ--详情概述

RabbitMQ--详情概述

一、消息队列(Rabbit Message Queue) 1、概念 消息队列是一种应用之间的通信方式&#xff0c;消息发送之后可以立即返回&#xff0c;由消息系统来确保消息的可靠传递。消息发布者只发布消息到MQ&#xff0c;消息使用者值从MQ中拿消息&#xff0c;两者不知道对方的存在。 简…
阅读更多...
Sentinel——限流规则

Sentinel——限流规则

目录 快速入门 簇点链路 案例 流控模式 流控模式——关联 流控模式——链路 案例 流控效果 流控效果——warm-up 流控效果——排队等待 热点参数限流 快速入门 簇点链路 簇点链路&#xff1a;就是项目内的调用链路&#xff0c;链路中被监控的每个接口就是一个资源。…
阅读更多...
【故障检测】基于 KPCA 的故障检测【T2 和 Q 统计指数的可视化】（Matlab代码实现）

【故障检测】基于 KPCA 的故障检测【T2 和 Q 统计指数的可视化】（Matlab代码实现）

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …
阅读更多...
[前端基础]异步操作(还没写完)

[前端基础]异步操作(还没写完)

1.写在前面 这篇是因为最近再写异步操作,需要点总结 因为还在学习前端的过程中嘛,所以有些东西可能会慢慢补充上来,也可能会有很多个人理解不是很到位的地方,还望各位评论区佬能帮忙指出.阿里嘎多捏 2.异步操作的概念和举例 异步操作和同步操作在408的三门课程中,都有所提及…
阅读更多...
基于php的校园垃圾分类网站的设计与实现

基于php的校园垃圾分类网站的设计与实现

摘要 近年来&#xff0c;随着民众环保意识的增强和资源有效利用问题的重视&#xff0c;全国各地市不断推进垃圾分类工作。教育部&#xff0c;也已于去年发布通知在全国各学校推进垃圾分类工作&#xff0c;以鼓励垃圾分类的有效实施。但现阶段我国校园的垃圾分类践行情况依旧问…
阅读更多...
STATS 782 - Control Flow and Functions

STATS 782 - Control Flow and Functions

文章目录 一、Control Flow1. If-Then-Else2. Loops 二、Functions1. Defining Functions2. 使用函数计算数学公式 总结 一、Control Flow 1. If-Then-Else > if (x > 0) y sqrt(x) else y -sqrt(-x)或 > y if (x > 0) sqrt(x) else -sqrt(-x)2. Loops ① fo…
阅读更多...
数组应该怎么用？

数组应该怎么用？

文章目录 前言一、数组是什么&#xff1f;二、数组的创建1.数组的创建&#xff1a;2.数组的初始化 三.数组的遍历1.逐个打印2.使用for循环四.二维数组1.语法&#xff1a;2.遍历 五.数组的一些常用方法1.数组转换字符串2.数组拷贝3.二分查找4.冒泡排序5.数组逆序 总结 前言 为什…
阅读更多...
动力节点Vue笔记——Vue与Ajax

动力节点Vue笔记——Vue与Ajax

四、Vue与AJAX 4.1 回顾发送AJAX异步请求的方式 发送AJAX异步请求的常见方式包括&#xff1a; 原生方式&#xff0c;使用浏览器内置的JS对象XMLHttpRequest const xhr new XMLHttpRequest()xhr.onreadystatechange function(){}xhr.open()xhr.send() 原生方式&#xff0…
阅读更多...
_awt_container容器_演示

_awt_container容器_演示

Component作为基类&#xff0c;提供了如下常用的方法来设置组件的大小、位置、可见性等。 方法签名方法功能setLocation(int x,int y)设置组件的位置setSize(int width,int heigth)设置组件的大小setBounds(int x,int y,int width,int heigth)设置组件的位置&#xff0c;大小。…
阅读更多...
基于蚂蚁优化算法的BP神经网络在负荷预测中的应用研究（Matlab完整代码实现）

基于蚂蚁优化算法的BP神经网络在负荷预测中的应用研究（Matlab完整代码实现）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; 目录 1 ACO-BP算法 2 ACO-BP算法基本思路 3 具体步骤 4 运行结果 ​ 5 参考文献 6 Matlab代码实现 1 ACO-BP算法 传统的…
阅读更多...
数组模拟实现单链表快速操作

数组模拟实现单链表快速操作

前言&#xff1a;我们都知道链表的一般模式是由结构体加指针来实现的&#xff0c;但是在实际的比赛中&#xff0c;结构体指针来实现链表的操作并不常用&#xff0c;原因是因为我们在增加节点时需要开辟新的内存&#xff0c;而比赛时给出的样例大多都是十几万个数据&#xff0c;…
阅读更多...
安装配置SVN版本控制管理工具

安装配置SVN版本控制管理工具

SVN工具能帮我们做什么&#xff1f; 核心功能&#xff1a;文档版本管理系统 适合对象&#xff1a;个人与团队都可以使用&#xff0c;企业中项目资源的重要管理工具 举例&#xff1a;一个文件夹里面的文档管理 1.下载安装SVN服务器 VisualSVN-Server 2.下载安装SVN客户端 T…
阅读更多...
【论文阅读】CVPR2023 IGEV-Stereo

【论文阅读】CVPR2023 IGEV-Stereo

用于立体匹配的迭代几何编码代价体 【cvhub导读】【paper】【code_openi】 代码是启智社区的镜像仓库&#xff0c;不需要魔法&#xff0c;点击这里注册 &#x1f680;贡献 1️⃣现有主流方法 基于代价滤波的方法和基于迭代优化的方法&#xff1a; 基于代价滤波的方法可以在c…
阅读更多...
大小字母转换

大小字母转换

1.代码实例: public class UpString { public static void main(String[] args) { if(args!null && args.length 1){ String str new String(args[0]); System.out.println(“原字符&#xff1a;” str “\n”); String newA str.toUpperCase(); System.out.prin…
阅读更多...
C语言分支和循环语句

C语言分支和循环语句

目录 1.什么是语句&#x1f60a; 2.分支语句&#xff08;选择结构&#xff09;&#x1f60a; 2.1 if语句&#x1f43e; 2.2 switch语句&#x1f43e; 3.循环语句 &#x1f60a; 3.1 while循环&#x1f43e; 3.2 for循环&#x1f43e; 3.3 do...while()循环&#x1f43e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023