vue-day3-组件-路由

最新推荐文章于 2024-05-31 16:08:57 发布
最新推荐文章于 2024-05-31 16:08:57 发布
阅读量132 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbb158/article/details/103310461
版权

组件：

就是起到 封装代码，模板多处重用的作用。

  • head导入vue.js
  • body底部 导入自己的js文件
  • 必须要建立vue对象
    在这里插入图片描述
    1.定义模板template

在这里插入图片描述
2.vue.compent 定义组件
在这里插入图片描述
3.调用组件
在这里插入图片描述

定义私有组件

1 定义template
如上一样
2 创建组件
在这里插入图片描述
3 调用
如上一样的

路由

导入vue.js
导入vue-router.js
1 写跳转连接

2 写组件模板

3创建 vue，vueRouter对象
4 放置 router-view

1 写跳转链接

在这里插入图片描述

2 js写定义两个组件模板
在这里插入图片描述

3 创建vue vue-Router对象
易错点： 创建的是组件，不是模板
vuerouter里面也是组件 不是模板参数
在这里插入图片描述
在这里插入图片描述
4 放置routerview
在这里插入图片描述

routerlink标签替换a标签

注意格式在这里插入图片描述

重定向

在这里插入图片描述

每次进入根目录，就转到/register2222

linkactiveclass 的使用

这个唯一的一个作用就是：
当前浏览器是在哪个标签，对应标签class里面多一个linkactiveclass的属性。
在这里插入图片描述
可以把 router-link-actvie 改成别的名字。
在 Vuerouter对象里面改
在这里插入图片描述

在这里插入图片描述

vue过渡动画

执行的4个流程，
在这里插入图片描述在这里插入图片描述

获得路由参数

路由匹配只匹配/login ？后面的当参数 不匹配
在这里插入图片描述

js里面

在这里插入图片描述
this. r o u t e t h i s . route this. routethis.route.query
在这里插入图片描述

参数显示出来

在这里插入图片描述

在这里插入图片描述

带两个参数

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

第二种路由参数方式。

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

如何拿到参数?
在这里插入图片描述

在这里插入图片描述

路由嵌套children 属性

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

在这里插入图片描述

在这里插入图片描述

childen 没有/符号 开头 避坑

在这里插入图片描述
在这里插入图片描述
/account 跳转account组件
在这里插入图片描述
/account /login 跳转 login组件

/account /register 跳转 register组件

经典布局

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

在这里插入图片描述

jbb158
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门-3--------Vue组件和路由
我爱吃红薯的博客
12-01 464
钩子函数 vue直接使用，如created()表加载模板之前调用该函数。 mounted()表渲染之后调用该函数。 <script> const app=new Vue({ el:"#app", data:{ name2:"张小帅2" , number:1 }, ...
【Vue3 生态】Vue Router 路由知识概览
前端知识分享喵
06-19 3778
在 Web 前端开发中，路由是非常重要的一环，但是路由到底是什么呢？
vue3 路由组件：vue-router 使用
yuroll的博客
03-15 235
网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和处于同一个等级。：该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签。在路由切换时，切换的是挂载的组件，其他内容不会发生改变。history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。history.go(-1) 相当于 history.back()；history.forward 相当于history.go(1)；
Vue3-路由详解
最新发布
A的博客
05-31 1444
让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：可以简化路由跳转及传参（后面就讲）。参数时，需要提前在规则中占位。的对象写法，必须使用。
vue3集成vue-router
I_xuebi的博客
05-20 355
vue vue3 集成 vue-router 路由
Vue3 使用路由 Router
大家好，我是 ed.
01-02 3357
众所周知，vue 是用来构建单页面应用的前端框架，大于大多数此类型应用来讲，都推荐使用官方支持的 vue Router，在单页面应用，客户端的 JavaScript 可以连接页面跳转请求，动态获取数据，然后无需重新加载页面的情况下，更新当前页面数据，这样可以带来更加丝滑的用户体验，因为这类场景下的用户通常会在很长的一段时间中做出多次交互，路由是更新在客户端执行的。vue Router是 vue 官方路由，他与 vue 核心深度集成，让 vue 构建单页面应用变得更加轻而易举。嵌套路由映射。
vue2-day3.zip
08-10
在"day3"的学习中，你可能接触到路由配置、动态路由匹配、导航守卫以及如何在组件之间通过路由传递参数。 最后，如果你在"day3"的材料中涉及到Vue CLI，那么你将了解到这是一个强大的脚手架工具，用于快速搭建Vue...
vue2-day7.zip
08-10
3. **指令**：Vue提供了多种内置指令，如`v-if`（条件渲染）、`v-for`（循环渲染）、`v-on`（绑定事件监听器）和`v-bind`（绑定属性）。它们在HTML元素上以`v-`开头，帮助我们扩展HTML的功能。 4. **计算属性**：在...
vue2-day5.zip
08-10
9. **异步组件与懒加载**：Vue 2支持异步组件，允许我们在需要时才加载组件，这有助于提升应用的加载速度，尤其是结合路由的懒加载。 10. **过渡效果**：Vue内置了基于CSS transitions和animations的过渡系统，同时...
vue2-day8.zip
08-10
在“day8”的内容中，可能涵盖了上述某些知识点的深入探讨，比如组件的高级用法、状态管理的实践、或者路由的配置等。学习Vue 2的过程中，理解并熟练运用这些概念是至关重要的，它们构成了Vue 2强大功能的基础。通过...
day01-VUE进阶
10-29
本课程旨在教授高级软件人才，快速掌握 Vue.js 进阶技术，涵盖了 Vue.js 基础知识的回顾、路由、状态管理、TypeScript 等高级主题。 一、基于脚手架创建前端工程 1. 使用 Vue CLI 创建前端工程，了解 Node.js 和 ...
Vue3 实现路由vue-router效果
qq_53721052的博客
11-14 1096
Vue3 实现路由vue-router效果
vue3 路由的使用
热门推荐
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
Vue3——路由和嵌套路由的使用
测试
12-19 2345
路由
【vue3 路由使用与讲解】vue-router ： 简洁直观的全面介绍
从今年开始写写博客~~
03-02 1949
vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由
vue3中路由的使用（详细讲解）
2301_78646673的博客
01-08 7603
在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA），其中所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。如果将一个一个的路由比作学生，那么路由器就是老师，负责管理所有的路由。
详解Vue3中的基础路由和动态路由
一起学习
12-24 3091
本文主要介绍Vue3中的基础路由和动态路由。
vue基本路由组件的使用
wangchaohpu的博客
11-10 680
准备：     a、使用vue-cli创建工程，方法见     https://blog.csdn.net/wangchaohpu/article/details/83657437       b、下载vue-router         在工程路径下：npm install vue-router --save       c、在src下创建router、views、main.js、ap...
vue-quill-editor如何引入组件
04-25
您可以以下面的步骤来引入 vue-quill-editor 组件： 1.在终端中使用以下命令来安装 vue-quill-editor： ``` npm install vue-quill-editor --save ``` 2.在需要使用组件的文件中引入 vue-quill-editor： ``` import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // 引入quill的样式文件 import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import 'quill/dist/quill.core.css' Vue.use(VueQuillEditor) ``` 3.在 template 中使用 vue-quill-editor 组件： ``` <template> <div> <vue-quill-editor v-model="content" /> </div> </template> ``` 请注意，您需要在此之前安装并引入 Quill 库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值