Vue-Router的基本使用

1.基本概念

Vue-Cli构建的是一个单页应用，页面由多个组件（Component）组成，要实现组件的跳转，传统的a标签已经不合适了，所以Vue-Router就出现了。Vue-Router是Vue的路由框架，能实现组件之间的跳转、参数传递等功能。

2.Vue-Router的配置

2.1 安装

    npm install router --save  //  安装

2.2 配置

在main.js中引入router

2.使用路由

打开我们的vue-cli项目，在router文件夹下的index.js文件内定义路由规则

然后引入你要配置router的页面

配置路由（其中children代表你配置的子路由）

使用

实现在Hello中跳转Hello1和Hello2,并传递参数

Router有两种跳转方式：

1.使用router-link标签

<router-link to="/路径?变量名=传递的参数">文字</router-link>

2.使用js代码

this.$router.push({path:'路径'，query:{参数名:'参数值'}})

接收方在页面中绑定参数：

{{this.$route.query.参数名}}