vue-router

1、路由原理 

路由就是用来解析URL实现不同页面之间的跳转

2、两种模式

（1）hash模式：符号“#”，以及#后面的字符称之为hash，用window.location.hash读取； 特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

（2）history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（）， replaceState（）可以对浏览器历史记录栈进行修改。 特点: history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

3、路由跳转方式

（1）编程式路由：

1.通过path去跳转

this.$router.push({
    path: "/login"
}); 

 2.通过name去跳转

methods:{
    backBtn(){
        this.$router.push({
            name: "login",
            // 传值
            query: {
           	 id: user.id
            }
        }
        );
        // this.$router.back();		//回退，类似history.back()
    }
}

（2）组件式 

<router-link to="/index"> 首页</router-link>
// router-link相当于我们的a标签，to是我们要加载哪个模块种的内容，值为我们路由配置好的路径

4、路由传参：

三种： 分别是query，params，动态路由传参

接收：(1) 通过query方式传递过来的参数一般是通过this.$route.query接收

          (2)通过params方式传递过来的参数一般是通过this.$route.params接收

          (3)通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

query使用path和name传参跳转都可以，而params只能使用name传参跳转。

传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。