vue-router学习

1. 概念

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

使用 router-link 组件来导航.
通过传入 to 属性指定链接.
默认会被渲染成一个 <a> 标签

2.安装

方法一：新建vue项目时直接下载
在这里插入图片描述

方法二：
安装 npm install vue-router --save-dev
src 目录下新建 router 目录，目录下新建 index.js
index.js里引入vue-router：

在main.js里引入

3. js 中配置路由

首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}
在这里插入图片描述
第一种路由跳转方法：

如果链接是在接接口的情况下，则应这样写：

<a :href="item.url"></a>

第二种路由跳转方法：
在需要跳转的地方添加：@click=“back”
data外面：

methods: {
	    back(){
	        this.$router.replace('/wenzhangxiangqing')
	    }
}

第三种路由跳转方式：
this.$router.go(1);

     <button @click="upPage">[上一页]</button>
     <button @click="downPage">[下一页]</button>

  upPage() {
      //  后退一步记录，等同于 history.back()
      this.$router.go(-1);
    },
 
    downPage() {
      // 在浏览器记录中前进一步，等同于 history.forward()
      this.$router.go(1);
    }

本文链接：https://blog.csdn.net/yanghongyan001/article/details/104533087

智能推荐

vuerouter路由的理解

vue-router 就是路由，地址栏输什么，到什么页面，而且vue-router可以通过html5的history实现单页面应用，不刷新跳转，你切地址，只是页面上的组件的切换。另外vue-router还可以实现页面间传参等其他功能。　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Hom...

Python+Selenium+Autolt选择本地文件上传至网站

如果网站有上传文件的功能，selenium不提供对本地元素的定位,如何使用python选择本地文件进行上传呢可以使用Autolt工具上传文件： 1、下载网址：https://www.autoitscript.com/site/autoit/downloads/ 2、点击“Downlad ZIP”下载 3、解压缩下载的ZIP文件 4、打开脚本编辑器文件夹，有一个SciTE....

数据结构系列之一-线性表

数据结构系列--线性表慧子和她的3D 慧子和她的3D 暑期工作搞不下去，不如趁着现在整块时间搞编程。学习资料书《大话数据结构》，前面两章的铺垫感性知识，看看过，从第三章开始正餐。 01 — 线性表线性表：零个或多个数据元素的有限序列。用数学语言表达： ...

Linux系统的远程操作练习

目录一、将虚拟机Ubuntu系统的网络连接设置为“桥接模式”，并配置Ubuntu的IP、网关参数二、在win10系统下用putty登录ubuntu系统三、VNC server VNC viewer 思考一、将虚拟机Ubuntu系统的网络连接设置为“桥接模式”，并配置Ubuntu的IP、网关参数 1.打开虚拟机，进入设置点击网络适配器，选择桥...

ORACLE----TimeStamp(时间戳)自动更新

之前对id的自增长进行了设置，原以为时间戳的更新也类似，使用序列之类的，但最终发现跟序列没半毛钱关系。触发器是肯定要用的，但编写脚本也是需要的。（1）创建触发器图2中，我们要选择事件（即例子中的INSERT,UPDATE），触发时间（即INSERT,UPDATE事件的前或后，例子中是before），列（例子中为MODIFIED_DATE，为TimeStamp类型），新旧值（为系统默认值OLD和...