router-view标签标记路由匹配到的组件的渲染位置吗？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-28 04:46 标签： router.push 传参数

先看一下这个效果图，里面包含选项卡切换，图片上传，还有富文本编辑器的功能

在element-ui里，选项卡切换和图片上传都是现成的，直接复制过来用就好了，但是由于没有后端接口那些，所以js逻辑也就空置在那里，而富文本编辑器我也是用的VueQuillEditor插件，直接下载，然后在main.js文件里面引入

之后的富文本编辑器头部那些控件就可以根据个人需求进行自定义了
看过我博客的朋友应该知道，我也是第一次用vue写这些东西，也都是参照了网上的那些demo，本人刚入行差12天就是满一年了，回想这一年，其实也挺难的，公司没有导师，没有人可以给我指导，所有的需求和功能还有bug都是自己百度参考，然后找不到的就是找朋友帮忙远程看看，在这个公司即将满一年了，接触了小程序，学了一点vue皮毛，会了一丢丢js和jQuery，你们说在一个公司有人指导帮忙解决问题比较好还是自己摸索前进成长快呢？我之前在csdn里面看到过一句话特别有意思，“内事不决问百度，外事不决找谷歌”！

VueRouter系列的文章示例编写时，项目是使用vue-cli脚手架搭建。

项目搭建的步骤和项目目录专门写了一篇文章：

后续VueRouter系列的文章的示例编写均基于该项目环境。

 本篇文章完整代码请移步：

  • 开发混合Web容器 您可以将移动应用程序开发为混合应用程序,该混合应用程序由本机应用程序包装程序(例如PhoneGap)和HTML查看器组成,用于在用户界面上显示内容. 混合应用程序的优点是可以在应用 ...

路由分为两种：后端路由 和 前端路由

（1）后端路由是指根据不同用户的URL请求，返回不同的内容。它的本质就是URL请求地址与服务器资源之间的对应关系。

（2）前端路由是指根据不同的用户事件，显示出不同的页面。它的本质是用户事件和事件处理函数之间的对应关系。

vue-router是Vue.js官方的路由管理器，它包含的功能有：

  • router-link 是vue中提供的标签，默认会被渲染为a标签
  • to属性默认会被渲染为href属性
  • to属性的值默认会被渲染为#开头的hash地址
  • 路由填充位也叫做路由占位符，将来通过路由规则匹配到的组件，将会被渲染到router-view 所在的位置

  1. 配置路由规则并创建路由实例

  • 每个路由规则都是一个配置对象，其中至少包含path 和component 两个属性:
  • path表示当前路由规则匹配的hash 地址
  • component表示当前路由规则对应要展示的组件
  1. 把路由挂载到Vue根实例中

路由重定向是指：用户在访问A页面时，强制用户跳转到地址B，从而展示特定的组建页面。
通过路由规则的redirect属性，指定一个新的路由地址就可以设置路由的重定向。

当我们需要设置多个路由链接时，可以使用动态路由的方式。

通过动态路由参数的模式进行路由匹配：

上面使用了$route.params来获取路由参数，但是$route与对应路由形成高度耦合，所以我们可以使用props将组件与路由进行解耦。

  1. props的值可以为布尔类型
  1. props的值可以为对象类型
  1. props的值可以为函数类型

为了更加方便的表示路由的路径，我们可以给路由规则起一个别名，这就是命名路由。

可以使用命名路由实现页面的跳转：

页面导航的方式有两种：声明式导航和编程式导航

（1）声明式导航是指通过点击连接实现导航，例如在普通网页中的连接、vue中的

下面来看一下vue中的这两种编程式导航方式：

（1）参数为字符串，表示路径名称

（2）参数为对象，表示path地址

（3）命名的路由，可以进行传参

我要回帖

更多关于 router.push 传参数 的文章

 

随机推荐