vue-router

什么是vue-router

vue-router是Vue.js官方的路由插件。
我们可以访问其官方网站对其进行学习。
vue-router路由是什么？

路由：

当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

路由的2种模式

一、history/hash

1. hash模式
   在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；
   特点：
   hash虽然在URL中，但不被包括在HTTP请求中，不会重加载页面。
   hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2. history模式
   history采用HTML5的新特性；pushState()和replaceState()可以对浏览器历史记录栈进行修
   特点:
   history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。

二、跳转页面

1. 编程式导航
   我们一般在使用this.$router.push({path:"/路径"})来跳转页面
2. 组件式导航

<router-link to="/index"> 首页</router-link>

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

三、路由传参

方式 发送 接收

query	this.$router.push({path:"/index",query:{id:1}})	this.$route.query.id
params	this.$router.push({name:"/Index",params:{id:1}})	this.$route.params.id

区别:
1、query使用path和name传参和跳转页面，而params只能使用name传参和跳转页面。
2、传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。
也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。

还有一种动态路由传参
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式 匹配路径 $route.params
/user/:username /user/evan { username: ‘evan’ }
/user/:username/post/:post_id /user/evan/post/123 { username: ‘evan’, post_id: ‘123’ }