为什么ajax请求进不来后端路由_前端路由与vue-router小结

1.什么是路由

通俗地说就是网址；专业的说，就是每次GET或POST等请求在服务端有一个专门的正则配置列表，匹配到具体的一个路径分发到不同的Controller，进行各种操作最终将html或数据返回前端。

2.为什么要用前端路由

以往绝大多数的网站都是后端路由（多页面），它的好处是使页面在服务端渲染完毕再返回给浏览器，不用等待加载css和js，同时还对SEO（搜索引擎优化）友好等。但是缺点也很明显，就是模板由后端编写维护，前端开发需要安装后端服务，学习后端开发语言。

之后有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获得数据后经过处理渲染到页面。后端负责数据，前端负责交互和可视化，条理清楚。特别是在Node.js出现后使得html模板完全由前端控制，并且同步或异步渲染由前端决定。

单页面富应用(SPA)的核心就是前端路由，在前后端分离的基础上再加一层前端路由。

3.什么是前端路由

由前端维护的路由规则。实现方式有两种。

1）锚点（#），就是url的hash，js通过hashChange事件监听url的改变。

2）HTML5的History模式，使url以“/”分隔，没有“#”，但是页面没有跳转，使用这种模式需要服务端 的支持，服务端在接受到所有请求后都指向同一个html文件，否则会报错。因此，SPA只有一个html，用来存放整个网站的所有内容，通过js来处理。

4.vue-router的使用方法

1）下载安装 npm install vue-router

2） 创建路由表：

a.在router.js文件中引入需要的vue，vue-router (import --- from ----)

b. 在实例化中 使用vue-router （Vue.use(VueRouter)）

c. 创建路由实例，确定每个路径和相对应组件的映射关系

d.抛出路由实例（export default router）

3）在main.js中注册路由（引用路由，在实例中添加路由）

4）使用路由两个组件<router-link>&<router-view>

<router-link>中属性有：to,tag,active-class

to主要是为了跳转目标路由

tag=>为了渲染成某些特定的标签

active-class=》则给当前渲染的组件一个class

5.路由传参

1.传递参数：this.$router.push({name=“”，params:{list:'123' } })

接受参数：this.$route.params.list

2.传递参数：this.$router.push({name=“”，query:{list:'123' } })

接受参数：this.$route.query.list

a.由于query与params传参机制不一样，造成的差异，刷新页面会导致params传递参数消 失，而query却不会，如果要隐藏参数用params，如果强制刷新不被清除用query

b.传递路由参数是router,而接受路由的参数是route

6.嵌套路由

1.路由直接嵌套，指在写映射的时候就直接写嵌套

在主路由下面加一个children属性，继续写子路由

7.路由守卫（拦截器）

to：即将要进入的目标路由对象

from：当前导航正要离开的路由

next：执行下一步