想问下关于页面跳转的一个过程

Question

比如一个网页已经打开了，里面有一个新闻列表，当我点击其中一条新闻时，会跳转到它的详细新闻页面。

这个一般是用Ajax+json实现，还是向后台语言在url传参数获得所要的模板页面。
如果是获得JSON的话，这个前端路由是怎么弄得...是像单页应用那样吗？一定要用框架吗。还是点击那条新闻的时候，先跳转到详情页，然后再Ajax请求数据，再用模板拼接好。

前端小白，这个过程我有点模糊，有点堵。有没有大佬给我疏通一下。

有例子更好了。

谢谢

Answer 1

这个一般是用Ajax+json实现，还是向后台语言在url传参数获得所要的模板页面。

看你的应用是前后台分离的还是和在一起的。

如果是在一起的，那么页面都是后端生成，至于方式比如模板引擎方式，或者php的直接嵌入方式都可以

如果是前后端分离的，前端做页面即可，通过ajax请求数据返回并显示。

以你的新闻列表举例：

有两个页面,一个news/list.html,一个是news/item.html?id=1

在news/list.html中，首先通过ajax请求返回新闻列表（比如标题、时间、id这些信息，内容可以不返回），然后给每一个新闻标题做一个链接跳转，比如跳转地址可以这么写<a href="news/item.html?id=1"，点击之后进入 list.html 页面，通过参数id，发送ajax请求，返回数据后（id为1的文章的完整内容），然后将数据写入html中显示即可。

这个是否是SPA没有什么直接的关系。

Answer 2

可以通过框架来实现，一般通过改变 hash 值（也就是 # 后面的值），来切换路由。VUE 路由

Answer 3

后台渲染 前端路由 或者详情页数据拉取 这三种方法都是切实可行的方法
介于楼主是小白 所以我推荐进详情页在拉取数据
详情页写好布局 根据url上的地址向后台请求数据渲染
可以参考这个问题，也是一个小白提的

Answer 4

想要更好维护(以后更容易更改修复)，用vue的前端路由功能。
刚接触的话，可以理解的解释是: 发送了ajax，再把得到的数据放入某个标签(div)的innerhtml里面了。
如果想让页面的最上面的框里面的地址也变化，实际是修改了history，而并非真正去访问了这个地址，这就是前端路由。
想了解原理，你可以查一查。相应文档:浏览器history对象，xmlhttprequest。两个。
这些和后端路由不太一样的地方就是。页面真的没有刷新，只是在进行修改dom的操作。任何你看到的东西都是修改出来的，包括，地址栏。。