这一段时间一直在做一个博客项目 ，找了一圈发现没有特别满足自己需求的目录组件，所以决定自己动手，完成一个满足以下预期目标的目录组件：

• 自动高亮选中当前正在阅读的章节
• 自动展开当前正在阅读的章节的子标题，并隐藏其他章节的子标题

完成后的目录组件如下图左侧所示：

由于标题之间有父子的关系，所以我们应该用树数据结构来解决这个问题。我们遍历文章容器中的所有标签，如果遇到 <h1>、<h2> 这类标签，就创建一个节点，将其放到列表中，之后使用 v-for 指令来生成目录就行了。下面分析一下每个节点需要有哪些属性。

一个树的节点，应该具有的属性包括：父节点的指针 parent、子节点的指针列表 children，因为一个节点代表一个标题，所以还要包含：标题的 ID号 id（用于 v-for 的 key），标题名 name（添加了标题的序号）、原始标题名 rawName 和标题的可见性 isVisible，当我们点击标题时，应该滚动到标题的位置，所以还要有 scrollTop 属性。在我们遍历文章容器中的所有标签时，需要判断当前遇到的标签和上一个标签之间的父子关系，所以要有一个 level 属性代表每一个节点的等级。下面是具体实现代码：

vue里面怎样从后台渲染列表，怎么根据文章的id获取文章的具体内容。以及值与值之间的传递，vue-router 里query和params的区别及使用。

先来看看query和params是怎样传值和接收参数的吧！后面会用到的哦！

（1）query方式传参和接收参数

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数

传递参数：把数据发送出去

接收参数：在其他的组件中接收传过来的参数

（2）params方式传参和接收参数

params相当于post请求，参数不会在地址栏中显示。

这里我们要创建一个vue组件，名为ArticleList，用于存放渲染的文章列表。

 
 
 console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点
//这里就不写css了

 //根据文章id跳转文章详情
 //根据路径跳转到文章在详情页并给详情页传递id

(4)根据id获取文章详情

再创建一个名为“article_content”的vue组件，用来放置文章的详情信息。

 //获取传过来的具体id值
 //给后台传递id地址
 console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点

2、根据id获取详细信息，id就藏在点击事件里面，当点击时，就跳转到详情页并把此时传过来的id传给后台，在详情页上根据id获取后台返回的数据并渲染出来。

到此这篇关于vue从后台渲染文章列表以及根据id跳转文章详情的文章就介绍到这了,更多相关vue后台渲染文章列表及根据id跳转文章内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！