Q：什么是前端路由？

A：url的变化引起ui的变化(无需页面刷新)

url:路径，网址，统一资源定位符

ui:用户所看见的交互页面，用户界面

本质上来说就是检测url的变化，截获url地址，然后解析来匹配路由规则

壹、路由配置

首先使用Vue-cil创建一个Vue2.0框架的项目，记得添加Vue Router，这样项目会自动导入生成文件；然后打开目录：

找到'src/router/index.js'文件，打开

import xxx from "xx/xx/xxx"
const routes = [{
	path: "", 
  	//路径
	name: "",
  	//组件名称（可选）
  	component: "",
  	//组件导入，也就是路径；上面Vue提供的有两种方式
    //一种是在头部导入，里面直接引用；
  	//
	//另一种方法，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的的时候才加载对应组件，更加高效。
    //一般来说，对所有的路由都使用动态导入是个好主意。
}]

贰、路由跳转

1、this.$router.push()

this.$router.push({ 
        path: '/home' 
        //name: 'home' 
        路由配置后二者取其一 
        })

跳转到指定的url路径，并在history栈添加一个记录

2、this.$router.replace()

this.$router.replace({ 
        path: '/home' 
        //同上name 
        })

直接替换了路径为指定的url路径，但是不会在history栈里面添加记录

3、this.$router.go(n)

this.$router.go(-1)

向前或者向后跳转n个页面，-1相当于跳转到上一个在history栈有记录的页面

4、router-link :to

<router-link :to="(path: '/home')" //同上name

router-link: to把参数传入router.push()并调用

叁、路由传参

以this.$router.push()为例

1、params

this.$router.push ({   
        path: '/home'   
        params:{   
            id: '1'   
                } 
        })

params第一次请求可以传递参数id，但是刷新之后id会消失

this.$route.params.id

接收参数

2、query

this.$router.push ({   
        path: '/home'   
        query:{   
        id: '1'   
               } 
        })

query传递参数id时候，页面路径后面会显示参数，类似?id=1,刷新页面后传递的参数不会消失

this.$route.query.id