Vue2&3全面知识总结七(1)

最新推荐文章于 2024-09-11 22:31:16 发布
最新推荐文章于 2024-09-11 22:31:16 发布
阅读量150 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 javascript vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52781902/article/details/126903978
版权

7. Vue Router

7.1 理解vue-router

7.1.2 vue-router的理解

vue的一个插件库，专门用来实现SPA应用

7.1.3 对SPA应用的理解
  1. 单页Web应用（single page web application，SPA）
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取
7.1.4 路由的解释
  1. 什么是路由?
    1. 一个路由就是一组映射关系（key - value）
    2. key为路径，value可能是function或component
  2. 路由分类
    1. 后端路由
      1. 理解：value是function，用于处理客户端提交的请求
      2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    2. 前端路由
      1. 理解：value是component，用于展示页面内容
      2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

7.2 基本路由

  1. 安装vue-router，命令npm i vue-router
  2. 应用插件Vue.use(VueRouter)
  3. 编写router配置项
import VueRouter from 'vue-router'			// 引入VueRouter
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. 实现切换
    <router-link></router-link>浏览器会被替换为a标签 active-class可配置高亮样式
<router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位<router-view></router-view>

实例：

src/router/index.js 该文件专门用于创建整个应用的路由器

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

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

src/main.js

import Vue from 'vue' // 引入Vue
import App from './App.vue' // 引入App组件。它是所有组件的父组件
import VueRouter from 'vue-router'; // 引入VouRouter
import router from "@/router";  // 引入路由器

Vue.config.productionTip = false

Vue.use(VueRouter); // 应用插件

new Vue({
    render: h => h(App),    // render函数完成了这个功能：将App组件放入容器中
    router: router,
}).$mount('#app')

src/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>

src/components/Home.vue

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

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

src/components/About.vue

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

<script>
export default {
  name: "About"
}
</script>

image-20220916221750515

7.3 几个注意事项

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

    比如上一节的案例就可以修改为src/pages/Home.vue src/pages/About.vue src/router/index.js src/components/Banner.vue src/App.vue

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

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

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

路由组件和一般组件区别：路由组件一般是参与了路由配置，并且在应用中没有直接写标签形式，如<About/>，一般组件即我们的页面组件

7.4 多级路由

  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>

src/pages/Home.vue

<template>
  <div>
    <h2>我是Home的内容</h2>
    <ul class="nav nav-tabs">
      <li>
        <router-link class="list-group-item" 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>
</template>

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

src/pages/News.vue

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

<script>
export default {
  name: "News"
}
</script>

src/pages/Message.vue

<template>
  <ul>
    <li>
      <a href="/message1">message001</a>
    </li>
    <li>
      <a href="/message2">message002</a>
    </li>
    <li>
      <a href="/message3">message003</a>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Message"
}
</script>

src/router/index.js

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

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

7.5 路由的query参数

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

演示：

src/router.index.js

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

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

src/pages/Message.vue

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

src/pages/Detail.vue

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

<script>
export default {
  name: "Detail",
}
</script>

image-20220916232504788

7.6 命名路由

作用：可以简化路由的跳转

如何使用

  1. 给路由命名
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
          			name:'hello' // 给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
  1. 简化跳转
<!--简化前，需要写完整的路径 -->
<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>

演示：

src/router/index.js

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

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

src/pages/Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!--跳转并携带query参数，to的字符串写法        -->
        <!--        <route-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</route-link>-->
        <!--跳转并携带query参数，to的对象写法（推荐）-->
        <router-link
            :to="{
          name: 'detail', // 使用name进行跳转
          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>

7.7 路由的params参数

  1. 配置路由，声明接收params参数
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'detail',
					path:'detail/:id/:title', // 🔴使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}
  1. 传递参数
    特别注意：路由携带param参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'detail',
		params:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
  1. 接收参数
$route.params.id
$route.params.title

实例：

src/router/index.js

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

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: "news",
                    component: News,
                },
                {
                    path: "message",
                    component: Message,
                    children: [
                        {
                            name: "detail", // name配置项为路由命名
                            path: "detail/:id/:title",  // 使用占位符声明接受params参数
                            component: Detail,
                        }
                    ]
                }
            ]
        },
        {
            path: '/about',
            component: About,
        }
    ]
})

src/pages/Message.vue

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

        <!--跳转并携带params参数，to的对象写法（推荐）-->
        <router-link
            :to="{
          name: 'detail', // 使用name进行跳转
          params: {
            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>

src/pages/Detail.vue

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

<script>
export default {
  name: "Detail",
}
</script>

image-20220917101033117

Ambition0823
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue2/vue3详细知识点
qq_56045326的博客
06-06 553
Vue2/3详细知识点介绍
Vue2 - 基础知识点（待补充VUE3）
zhuanghuajun的博客
08-27 273
2021最新Vue技术全家桶丨vue3.x最新版详细讲解示例 vue-数据绑定 vue-el与data的两种写法 vue-MVVM 数据代理 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件修饰符 键盘事件 计算属性 姓名案例_插值语法实现 姓名案例_methods实现 姓名案例_计算属性实现 监视属性 天气案例_监视属性 绑定样式 条件渲染 列表渲染 基本列表 key的原理 列...
Vue2、Vue3知识总结---完整版✨
weixin_43323097的博客
08-21 5753
Vue2Vue3知识总结---完整版✨
超全面总结Vue面试知识点
阳阳的博客
04-17 3027
目录 前言 1.MVC 与 MVVM的区别 MVC MVVM 区别 Vue 并没有完全遵循 MVVM 的思想 2.为什么data需要是一个函数？ 3.v-if与v-show v-if与v-show的区别 v-show指令算是重排吗？ 4.v-for v-if 与 v-for 为什么不建议一起使用？ v-for中的key有什么作用？为什么在v-for中的key不推荐使用随机数或者index？ v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？ 5.常见的Vue内置指令
vue2基础知识-2
weixin_43484007的博客
11-02 303
安装Vue CLI脚手架查看Vue CLI版本用Vue CLI创建项目。
VUE3知识体系思维导图全面总结梳理
11-03
VUE3知识体系思维导图全面总结
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
超全面的vue.js使用总结
10-20
1. **Vue.js组件** 组件是Vue.js的核心特性之一，它们允许我们将应用程序拆分成可重用的模块。通过`Vue.component()`方法注册组件，例如： ```javascript Vue.component('componentName', { template: '#...
vue3基础知识点快速掌握
06-07
### Vue3基础知识点快速掌握 #### 一、Vue3简介 **发布时间与版本：** - **发布日期：** 2020年9月18日 - **版本号：** 3.0，代号"One Piece" - **最新版本：** 截至2023年10月，最新公开版本为3.3.4 **关键更新...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 610
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
基于Spring Boot构建一个点餐系统
嵌入式行业打工人，不定期更新博客。
09-08 1019
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如用户认证、购物车管理、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问和需求，可以私信联系我。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 985
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 430
【代码】el-popover弹框自定义位置。
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 547
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1098
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
一文读懂 JS 中的 Set 结构
最新发布
沐爸的博客
09-11 629
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 2002
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 893
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
vue3 el-menu 菜单Maximum recursive updates exceeded 报错
supming1的专栏
09-05 487
vue3 el-menu 菜单Maximum recursive updates exceeded 报错解决方案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ambition0823

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值