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);
    }