Vue-router【VUE】

news2024/11/25 19:46:17

6. vue-router

6.1 相关理解

6.1.1 vue-router 的理解

  1. 路由就是一组key-value的对应关系。
  2. 多个路由，需要经过路由器的管理
  3. vue是一个插件库，专门用来实现SPA应用。

6.1.2 对SPA应用的理解

  1. 单页 Web 应用（single page web application, SPA）
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过 ajax 请求获取

6.1.3 路由的理解

  1. 什么是路由？
    （1）一个路由就是一组映射关系（key-value）
    （2）key为路径，value可能是 function 或 component
  2. 路由分类

  • 后端路由：
    （1）理解：value 是 function，用于处理客户端提交的请求。
    （2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

  • 前端路由
    （1）理解：value是component，用于展示页面内容。
    （2）工作过程：当浏览器的路径改变时，对应的组件就会显示。

6.2 基本路由

6.2.1 效果

在这里插入图片描述
在这里插入图片描述

6.2.2 基本使用

  1. 安装vue-router，命令：npm i vue-router@3
    注意 vue2 使用 vue-router3，而vue3 使用 vue-router4
  2. 应用插件：Vue.use(VueRouter)
  3. 编写router配置项：
//引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
  1. 实现切换（active-class可配置高亮样式）
 <router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位置
 <router-view></router-view>

源代码如下：

About.vue

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

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

Home.vue

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

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

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">
		  <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

		  <!-- 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>

router/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
        },
    ]
})

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(vueResource)
//应用插件
Vue.use(VueRouter)

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

6.2.3 几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
  2. 通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的 $route 属性，里面存储着自己的路由信息。
  4. 整个应用只有一个 router，可以通过组件的 $router 属性获取

6.3 嵌套路由

效果：
在这里插入图片描述

  1. 配置路由规则，使用children配置项
routes: [
	{
		path: '/about',
		component: About,
	},
	{
		path: '/home',
		component: Home,
		children: [ //通过children配置子级路由
			{
				path: 'news',//此处一定不要写：/news
				component: News
			},
			{
				path: 'message',//此处一定不要写：/message
				component: Message
			}
		]
	}
]
  1. 跳转（要写完整路径）
<router-link to="/home/news">News</router-link>

6.4 路由传参

6.4.1 路由的query参数

效果：
在这里插入图片描述

  1. 传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
               title:'你好'
   		}
   	}"
  </router-link>
  1. 接收参数
   $route.query.id
   $route.query.title

index.js

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

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

detail.vue

<template>
  <ul>
    <li>消息编号：{{$route.query.id}}</li>
    <li>消息标题：{{$route.query.title}}</li>
  </ul>
</template>

<script>
    export default {
        name: 'Detail',
        mounted(){
            console.log(this.$route);
        }
    }
</script>

<style>

</style>

Message.vue

<template>
  <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">  
                <!-- 跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link :to="{
                    path: '/home/message/detail',
                    query: {
                        id: m.id,
                        title: m.title
                    }
                }">
                    {{ m.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: 'Message',
        data(){
            return {
                messageList: [
                    {id: '001',title: '消息001'},
                    {id: '002',title: '消息002'},
                    {id: '003',title: '消息003'},
                ]
            }
        }
    }
</script>

6.4.2 路由的命名

  1. 作用：可以简化路由的跳转
  2. 如何使用
    （1）给路由命名：
{
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                            name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }

（2）简化跳转：

<!--简化前，需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link>
      
      <!--简化后，直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <!--简化写法配合传递参数 -->
      <router-link 
      	:to="{
      		name:'hello',
      		query:{
      		   id:666,
                  title:'你好'
      		}
      	}"
      </router-link>

6.4.3 路由的params参数

  1. 配置路由，声明接收params参数
{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
  1. 传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>
   				
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   </router-link>

特别注意： 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  1. 接收参数：
   $route.params.id
   $route.params.title

6.4.4 路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

6.4.5 router-link 的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push 和 replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

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

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

相关文章

C++基础阶段入门 （1）

C++基础阶段入门 （1）

1.C统一初始化: 初始化列表解决方案&#xff1a; //C语言的初始化方案 int main() {int a 10;int* ip nullptr;int ar[] { 12,23,34,45,56,67 }; } C 初始化&#xff1a;使用{ } int main(){//char ch a;char ch{ a };//int a 10;int a{ 10 };int b int(10);int x{ 10…
阅读更多...
企业软文怎么写吸引人？教你几招

企业软文怎么写吸引人？教你几招

企业每年都要投放大量的商业软文到热门的内容平台上&#xff0c;也许现在你阅读的某篇文章&#xff0c;就是一篇企业软文。 真正厉害的软文在于你根本看不出来这是一条广告&#xff0c;从而让你心甘情愿的为某个产品掏腰包。企业软文到底怎么写才吸引人&#xff0c;接下来伯乐…
阅读更多...
sfavsrv导致主机负载高

sfavsrv导致主机负载高

下午接客户电话&#xff0c;监控告警了&#xff0c;主机负载高&#xff0c;登录后top查看&#xff0c;确实比较的高 再次查看负载高的cpu发现是sfavsrv 吓了一跳&#xff0c;还以为中毒了&#xff0c;发给客户检查是否自行部署了第3方软件&#xff0c;确实第3方的&#xff0c;关…
阅读更多...
如何将pdf图片文字转换成word 文字word图片怎么转换pdf

如何将pdf图片文字转换成word 文字word图片怎么转换pdf

如今大家在工作中常常会运用到电脑来办公&#xff0c;电脑的运用大大提高了我们的工作效率&#xff0c;在带来机会的同时同样也带来了新挑战。 pdf图片怎么转换成word文档&#xff1f;PDF格式是一种常用的文档格式&#xff0c;它可以保持文档内容和格式的完整性&#xff0c;但是…
阅读更多...
4月有8本SCIE期刊被剔除（附MDPI/Frontiers/Hindawi最新在检期刊）

4月有8本SCIE期刊被剔除（附MDPI/Frontiers/Hindawi最新在检期刊）

2023年4月SCI、SSCI期刊目录更新 2023年4月18日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;继上次3月WOS期刊目录剔除50本SCIE&SSCI期刊之后&#xff0c;此次4月更新又有8本SCIE期刊发生变动&#xff0c;其中有4本期刊被踢出SCIE数据库&#xff0c;4本期刊更改了名…
阅读更多...
QMS-云质说质量 - 2 你真的知道什么是质量吗

QMS-云质说质量 - 2 你真的知道什么是质量吗

云质QMS原创 转载请注明来源 作者&#xff1a;王洪石 引言 暴露的只是冰山一角 注&#xff1a;&#xff08;&#xff09;中为ISO9000:2015 质量管理体系基础和术语的编号 一个组织的质量管理(3.3.4)&#xff0c;可包括制定质量方针(3.5.9)和质量目标(3.7.2)&#xff0c;以及通…
阅读更多...
Web 攻防之业务安全：接口未授权访问/调用测试（敏感信息泄露）

Web 攻防之业务安全：接口未授权访问/调用测试（敏感信息泄露）

Web 攻防之业务安全&#xff1a;接口未授权访问/调用测试 业务安全是指保护业务系统免受安全威胁的措施或手段。广义的业务安全应包括业务运行的软硬件平台&#xff08;操作系统、数据库&#xff0c;中间件等&#xff09;、业务系统自身&#xff08;软件或设备&#xff09;、业…
阅读更多...
火车站闸机web3d数字展示平台全方位动态呈现设备细节

火车站闸机web3d数字展示平台全方位动态呈现设备细节

智能互联网时代&#xff0c;传统的图片、文字、视频等产品展示方式&#xff0c;因为缺少互动性&#xff0c;很难引起用户的兴趣&#xff0c;已经逐渐失去了宣传优势。 Web3D交互展示技术的出现&#xff0c;让众多品牌和企业找到了新的方向&#xff0c;线上产品展示不在枯燥无趣…
阅读更多...
少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析（选择题）2023年3月

少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析（选择题）2023年3月

2023年3月scratch编程等级考试一级真题 选择题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 1、下列说法不正确的是 A、可以从声音库中随机导入声音 B、可以录制自己的声音上传 C、可以修改声音的大小 D、不能修改声音的速度 答案&#xff1a;D…
阅读更多...
计算机网络第1章（概述）

计算机网络第1章（概述）

文章目录 1.1、计算机网络在信息时代的作用1.2、因特网概述1、网络、互连网&#xff08;互联网&#xff09;和因特网2、因特网发展的三个阶段3、因特网的标准化工作4、因特网的组成 1.3 三种交换方式1、电路交换&#xff08;Circuit Switching&#xff09;2、分组交换&#xff…
阅读更多...
Composer使用教程

Composer使用教程

Composer使用教程 前言1.Composer 简介2. 下载与安装2.1 局部安装2.2 全局安装2.3 更新composer2.4查看composer2.5 安装composer镜像加速 3. composer的使用3.1初始化3.2安装第三方包 4. 自动加载器4.1 加载非 class 文件4.2 加载自己写 class 文件4.3 PSR-4 自动加载规范 5. …
阅读更多...
【脱产二站上岸】上海交大819复习经验总结

【脱产二站上岸】上海交大819复习经验总结

笔者来自通信考研小马哥23上交819全程班学员 本科西南某985&#xff0c;成绩排名中下&#xff08;面试被老师疯狂吐槽&#xff09;&#xff0c;一战本校&#xff0c;初试分数差10来分被刷。21年12月考完数学和专业课出来就知道考不上了&#xff0c;分数一出就下决心二战&#…
阅读更多...
软件测试，想找一份20k以上的工作需要掌握哪些知识？

软件测试，想找一份20k以上的工作需要掌握哪些知识？

都知道IT行业是高薪人员的聚集地&#xff0c;但想要成为高薪程序员却并不容易。月薪20k是测试工程师的一个门槛&#xff0c;想要突破就必须掌握更多的技能。 因为程序员职业发展很快&#xff0c;即使是相同起点的人&#xff0c;经过几年的工作或学习&#xff0c;会迅速拉开极…
阅读更多...
Python列表和字典前面为什么要加星号（**）？

Python列表和字典前面为什么要加星号（**）？

人生苦短&#xff0c;我用python 今天来和大家一起学习一下为什么Python列表和字典前面会加星号&#xff08;&#xff09;&#xff1f;** python 安装包资料:点击此处跳转文末名片获取 Python 中&#xff0c; 单星号*和双星号**除了作为“乘”和“幂”的数值运算符外&#xff…
阅读更多...
【python的pdb调试简单了解一下？】

【python的pdb调试简单了解一下？】

调试是程序开发过程中的重要环节&#xff0c;它可以帮助开发人员识别和解决程序中的错误和问题。Python 提供了一个内置的调试器 pdb&#xff08;Python Debugger&#xff09;&#xff0c;可以帮助开发人员逐行分析代码、查看变量值、跟踪函数调用等。 入门 要使用 pdb 调试器…
阅读更多...
Numpy从入门到精通——存读矩阵以及读取矩阵中的数据

Numpy从入门到精通——存读矩阵以及读取矩阵中的数据

这个专栏名为《Numpy从入门到精通》&#xff0c;顾名思义&#xff0c;是记录自己学习numpy的学习过程&#xff0c;也方便自己之后复盘&#xff01;为深度学习的进一步学习奠定基础&#xff01;希望能给大家带来帮助&#xff0c;爱睡觉的咋祝您生活愉快&#xff01; 这一篇介绍《…
阅读更多...
c#期末复习题重点难点题

c#期末复习题重点难点题

2. (单选题, 9分)在.NET中&#xff0c;.NET Framework由&#xff08; &#xff09;组成。 A. FCL和CLR -开发库和运行环境B. ADO.NETASP.NET -数据操作和web框架C. CLS和CTS -语法规范和类型规范 即所有语言和语法规范 和 各语言间的类型互操作性规范D. Winform和ASP.NET…
阅读更多...
2023前端面试上岸手册——JavaScript部分

2023前端面试上岸手册——JavaScript部分

目录 JavaScript 有哪些数据类型&#xff0c;它们的区别&#xff1f;数据类型检测的方式有哪些null 和undefined 区别如何获取安全的 undefined 值&#xff1f;Object.is() 与比较操作符 “两等” 、“三等” 的区别&#xff1f;什么是 JavaScript 中的包装类型&#xff1f;为什…
阅读更多...
盘点：这些好用的ERP软件你知道哪些？

盘点：这些好用的ERP软件你知道哪些？

在选择ERP系统时&#xff0c;我们可以按照这三个维度&#xff0c;然后再按照需求去选择ERP系统。 市面上ERP软件大概可以分为三大类&#xff1a; ① 标准ERP应用&#xff1a;功能比较固定&#xff0c;难以满足个性化需求&#xff0c;二次开发难度很高&#xff1b; ② 找外包/…
阅读更多...
校企合作 | 璞华×中南财经政法大学，共建教学实习（就业实践）基地

校企合作 | 璞华×中南财经政法大学，共建教学实习（就业实践）基地

4月17日&#xff0c;璞华集团与中南财经政法大学举行校外教学实习基地签约及挂牌仪式&#xff0c;揭开校企产学研合作序幕。 中南财经政法大学统计与数学学院院长张虎先生、统计与数学学院党委书记&副院长梁娜女士、统计与数学学院院党委副书记&纪委书记王瑄女士、外国…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023