2024-01-12 17:21:12 +08:00

1 line
30 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#FFF"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"><link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" type="application/rss+xml" title="涛声依旧" href="https://hitoli.com/rss.xml"><link rel="alternate" type="application/atom+xml" title="涛声依旧" href="https://hitoli.com/atom.xml"><link rel="alternate" type="application/json" title="涛声依旧" href="https://hitoli.com/feed.json"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="/css/app.css?v=0.0.0"><meta name="keywords" content="Vue"><link rel="canonical" href="https://hitoli.com/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/"><title>Vue 根据路由传参修改页面数据 - Vue - 工作 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎?为之,则难者亦易矣</title><meta name="generator" content="Hexo 7.0.0"></head><body itemscope itemtype="http://schema.org/WebPage"><div id="loading"><div class="cat"><div class="body"></div><div class="head"><div class="face"></div></div><div class="foot"><div class="tummy-end"></div><div class="bottom"></div><div class="legs left"></div><div class="legs right"></div></div><div class="paw"><div class="hands left"></div><div class="hands right"></div></div></div></div><div id="container"><header id="header" itemscope itemtype="http://schema.org/WPHeader"><div class="inner"><div id="brand"><div class="pjax"><h1 itemprop="name headline">Vue 根据路由传参修改页面数据</h1><div class="meta"><span class="item" title="创建时间2023-01-10 10:19:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2023-01-10T10:19:00+08:00">2023-01-10</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>1.7k</span> <span class="text"></span> </span><span class="item" title="阅读时长"><span class="icon"><i class="ic i-clock"></i> </span><span class="text">阅读时长</span> <span>2 分钟</span></span></div></div></div><nav id="nav"><div class="inner"><div class="toggle"><div class="lines" aria-label="切换导航栏"><span class="line"></span> <span class="line"></span> <span class="line"></span></div></div><ul class="menu"><li class="item title"><a href="/" rel="start">☆∵∴Hito∴∵★</a></li></ul><ul class="right"><li class="item theme"><i class="ic i-sun"></i></li><li class="item search"><i class="ic i-search"></i></li></ul></div></nav></div><div id="imgs" class="pjax"><ul><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipexj2jgzj20zk0m8b09.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeubcbajj20zk0m8h1h.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeu1usa7j20zk0m8b29.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipet4bz0yj20zk0m8e81.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclfw2t96j20zk0m8x6p.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipetv6p75j20zk0m8x6p.jpg"></li></ul></div></header><div id="waves"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0"/><use xlink:href="#gentle-wave" x="48" y="3"/><use xlink:href="#gentle-wave" x="48" y="5"/><use xlink:href="#gentle-wave" x="48" y="7"/></g></svg></div><main><div class="inner"><div id="main" class="pjax"><div class="article wrap"><div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><i class="ic i-home"></i> <span><a href="/">首页</a></span><i class="ic i-angle-right"></i> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/" itemprop="item" rel="index" title="分类于 工作"><span itemprop="name">工作</span></a><meta itemprop="position" content="1"></span><i class="ic i-angle-right"></i> <span class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/Vue/" itemprop="item" rel="index" title="分类于 Vue"><span itemprop="name">Vue</span></a><meta itemprop="position" content="2"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://hitoli.com/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Hito Li"><meta itemprop="description" content="天下事有难易乎?为之,则难者亦易矣, 天生我材必有用"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="涛声依旧"></span><div class="body md" itemprop="articleBody"><h4 id="引言"><a class="anchor" href="#引言">#</a> 引言</h4><p>在开发前端页面时会存在相同的页面展示,只是菜单名称不同、数据类型不同的情况。如果再拷贝一个页面来展示后期就需要维护两个页面,同时也增加了工作量。但是只使用一个页面通过传参来改变数据就方便多了。</p><h4 id="路由配置"><a class="anchor" href="#路由配置">#</a> 路由配置</h4><p></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"> <span class="attr">path:</span> <span class="string">&#x27;/test/:type/:menuIndex&#x27;</span>,</span><br><span class="line"> <span class="attr">name:</span> <span class="string">&#x27;Test&#x27;</span>,</span><br><span class="line"> <span class="attr">component:</span> <span class="string">_import(&#x27;xxx/Test.vue&#x27;)</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><p></p><h4 id="菜单配置"><a class="anchor" href="#菜单配置">#</a> 菜单配置</h4><p></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&lt;template&gt;</span></span><br><span class="line"> <span class="string">&lt;el-menu</span></span><br><span class="line"> <span class="string">class=&quot;aside-menu&quot;</span></span><br><span class="line"> <span class="string">:default-active=&quot;menuIndex.toString()&quot;</span></span><br><span class="line"> <span class="string">@select=&quot;handleSelect&quot;</span></span><br><span class="line"> <span class="string">&gt;</span></span><br><span class="line"><span class="string"> &lt;el-menu-item</span></span><br><span class="line"><span class="string"> index=&quot;1&quot;</span></span><br><span class="line"><span class="string"> class=&quot;aside-menu-item&quot;</span></span><br><span class="line"><span class="string"> &gt;</span></span><br><span class="line"><span class="string"> &lt;template #title&gt;</span></span><br><span class="line"><span class="string"> &lt;span&gt;TEST1&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;el-icon :size=&quot;20&quot;&gt;&lt;TrendCharts /&gt;&lt;/el-icon&gt;</span></span><br><span class="line"><span class="string"> &lt;/template&gt;</span></span><br><span class="line"><span class="string"> &lt;/el-menu-item&gt;</span></span><br><span class="line"><span class="string"> &lt;el-menu-item</span></span><br><span class="line"><span class="string"> index=&quot;2&quot;</span></span><br><span class="line"><span class="string"> class=&quot;aside-menu-item&quot;</span></span><br><span class="line"><span class="string"> &gt;</span></span><br><span class="line"><span class="string"> &lt;template #title&gt;</span></span><br><span class="line"><span class="string"> &lt;span&gt;TEST2&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;el-icon :size=&quot;20&quot;&gt;&lt;Orange /&gt;&lt;/el-icon&gt;</span></span><br><span class="line"><span class="string"> &lt;/template&gt;</span></span><br><span class="line"><span class="string"> &lt;/el-menu-item&gt;</span></span><br><span class="line"><span class="string"></span> <span class="string">&lt;/el-menu&gt;</span></span><br><span class="line"><span class="string">&lt;/template&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="attr">methods:</span> &#123;</span><br><span class="line"> <span class="string">handleSelect</span> <span class="string">(val)</span> &#123;</span><br><span class="line"> <span class="string">if</span> <span class="string">(val</span> <span class="string">===</span> <span class="string">&#x27;1&#x27;</span><span class="string">)</span> &#123;</span><br><span class="line">        <span class="string">this.$router.push(</span>&#123; <span class="attr">path:</span> <span class="string">&#x27;/test/type1/&#x27;</span> <span class="string">+</span> <span class="string">val</span> &#125;<span class="string">)</span></span><br><span class="line"> &#125; <span class="string">else</span> <span class="string">if</span> <span class="string">(val</span> <span class="string">===</span> <span class="string">&#x27;2&#x27;</span><span class="string">)</span> &#123;</span><br><span class="line"> <span class="string">this.$router.push(</span>&#123; <span class="attr">path:</span> <span class="string">&#x27;/test/type2/&#x27;</span> <span class="string">+</span> <span class="string">val</span> &#125;<span class="string">)</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><h4 id="页面"><a class="anchor" href="#页面">#</a> 页面</h4><p></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">created</span> <span class="string">()</span> &#123;</span><br><span class="line"> <span class="string">this.$watch(</span></span><br><span class="line"> <span class="string">()</span> <span class="string">=&gt;</span> <span class="string">this.$route.params</span>,</span><br><span class="line"> <span class="string">(toParams</span>, <span class="string">previousParams)</span> <span class="string">=&gt;</span> &#123;</span><br><span class="line"> <span class="string">if</span> <span class="string">(isNotEmpty(toParams.menuIndex))</span> &#123;</span><br><span class="line"> <span class="string">this.menuIndex</span> <span class="string">=</span> <span class="string">toParams.menuIndex</span></span><br><span class="line"> &#125;</span><br><span class="line"> <span class="string">if</span> <span class="string">(isNotEmpty(toParams.type))</span> &#123;</span><br><span class="line"> <span class="string">this.type</span> <span class="string">=</span> <span class="string">toParams.type</span></span><br><span class="line"> &#125;</span><br><span class="line">        <span class="string">//</span> <span class="string">根据type查询数据</span></span><br><span class="line">        <span class="string">...</span></span><br><span class="line">      &#125;</span><br><span class="line"> <span class="string">)</span></span><br><span class="line"> <span class="string">if</span> <span class="string">(isNotEmpty(this.$route.params.menuIndex))</span> &#123;</span><br><span class="line"> <span class="string">this.menuIndex</span> <span class="string">=</span> <span class="string">this.$route.params.menuIndex</span></span><br><span class="line"> &#125;</span><br><span class="line"> <span class="string">if</span> <span class="string">(isNotEmpty(this.$route.params.type))</span> &#123;</span><br><span class="line"> <span class="string">this.type</span> <span class="string">=</span> <span class="string">this.$route.params.type</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;<span class="string">,</span></span><br><span class="line"><span class="string">mounted</span> <span class="string">()</span> &#123;</span><br><span class="line"> <span class="string">//</span> <span class="string">根据type查询数据</span></span><br><span class="line"> <span class="string">...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><div class="tags"><a href="/tags/Vue/" rel="tag"><i class="ic i-tag"></i> Vue</a></div></div><footer><div class="meta"><span class="item"><span class="icon"><i class="ic i-calendar-check"></i> </span><span class="text">更新于</span> <time title="修改时间2023-04-22 21:41:45" itemprop="dateModified" datetime="2023-04-22T21:41:45+08:00">2023-04-22</time> </span><span id="2023/01/10/Vue根据路由传参修改页面数据/" class="item leancloud_visitors" data-flag-title="Vue 根据路由传参修改页面数据" title="阅读次数"><span class="icon"><i class="ic i-eye"></i> </span><span class="text">阅读次数</span> <span class="leancloud-visitors-count"></span> <span class="text"></span></span></div><div class="reward"><button><i class="ic i-heartbeat"></i> 赞赏</button><p>请我喝[茶]~( ̄▽ ̄)~*</p><div id="qr"><div><img data-src="/images/wechatpay.png" alt="Hito Li 微信支付"><p>微信支付</p></div><div><img data-src="/images/alipay.png" alt="Hito Li 支付宝"><p>支付宝</p></div></div></div><div id="copyright"><ul><li class="author"><strong>本文作者: </strong>Hito Li <i class="ic i-at"><em>@</em></i>涛声依旧</li><li class="link"><strong>本文链接:</strong> <a href="https://hitoli.com/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" title="Vue 根据路由传参修改页面数据">https://hitoli.com/2023/01/10/Vue根据路由传参修改页面数据/</a></li><li class="license"><strong>版权声明: </strong>本站所有文章除特别声明外,均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处!</li></ul></div></footer></article></div><div class="post-nav"><div class="item left"><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1gipeuv80yoj20zk0m8kjl.jpg" title="Highcharts画收益概览"><span class="type">上一篇</span> <span class="category"><i class="ic i-flag"></i> Highcharts</span><h3>Highcharts画收益概览</h3></a></div><div class="item right"><a href="/2023/01/31/KLineChart%E7%94%BB%E6%B3%A2%E6%AE%B5%E9%AB%98%E4%BD%8E%E4%BB%B7%E5%9B%BE/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1gipesrnqv3j20zk0m8ava.jpg" title="KLineChart画波段高低价图"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> KLineChart</span><h3>KLineChart画波段高低价图</h3></a></div></div><div class="wrap" id="comments"></div></div><div id="sidebar"><div class="inner"><div class="panels"><div class="inner"><div class="contents panel pjax" data-title="文章目录"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%95%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">引言</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE"><span class="toc-number">2.</span> <span class="toc-text">路由配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%8F%9C%E5%8D%95%E9%85%8D%E7%BD%AE"><span class="toc-number">3.</span> <span class="toc-text">菜单配置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2"><span class="toc-number">4.</span> <span class="toc-text">页面</span></a></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li><a href="/2022/11/04/%E8%AE%B0%E4%B8%80%E6%AC%A1Vue%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E7%BD%B2/" rel="bookmark" title="记一次Vue项目的部署">记一次Vue项目的部署</a></li><li><a href="/2022/11/09/Vue%E6%8C%89%E7%8E%AF%E5%A2%83%E8%AE%BE%E7%BD%AE%E7%BC%96%E8%AF%91%E9%A1%B9%E7%9B%AE/" rel="bookmark" title="Vue按环境设置编译项目">Vue按环境设置编译项目</a></li><li class="active"><a href="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" rel="bookmark" title="Vue根据路由传参修改页面数据">Vue根据路由传参修改页面数据</a></li></ul></div><div class="overview panel" data-title="站点概览"><div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="image" itemprop="image" alt="Hito Li" data-src="/images/avatar.jpg"><p class="name" itemprop="name">Hito Li</p><div class="description" itemprop="description">天生我材必有用</div></div><nav class="state"><div class="item posts"><a href="/archives/"><span class="count">54</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">21</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">92</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8xMDYxNDYwNzQ1" title="https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;1061460745"><i class="ic i-weibo"></i></span> <span class="exturl item douban" data-url="aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUvMjU5Mzc2NTY0" title="https:&#x2F;&#x2F;www.douban.com&#x2F;people&#x2F;259376564"><i class="ic i-douban"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTEwNTQ2NzQ2Mw==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;105467463"><i class="ic i-cloud-music"></i></span> <a href="/about/me" title="about&#x2F;me" class="item about"><i class="ic i-address-card"></i></a></div><ul class="menu"><li class="item"><a href="/" rel="section"><i class="ic i-home"></i>首页</a></li><li class="item dropdown"><a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a><ul class="submenu"><li class="item"><a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a></li><li class="item"><a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a></li><li class="item"><a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a></li></ul></li><li class="item"><a href="/tools/" rel="section"><i class="ic i-magic"></i>工具</a></li><li class="item"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><i class="ic i-paper-plane"></i>虫洞</span></li><li class="item"><a href="/about/me" rel="section"><i class="ic i-user"></i>关于</a></li></ul></div></div></div><ul id="quick"><li class="prev pjax"><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a></li><li class="up"><i class="ic i-arrow-up"></i></li><li class="down"><i class="ic i-arrow-down"></i></li><li class="next pjax"><a href="/2023/01/31/KLineChart%E7%94%BB%E6%B3%A2%E6%AE%B5%E9%AB%98%E4%BD%8E%E4%BB%B7%E5%9B%BE/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a></li><li class="percent"></li></ul></div></div><div class="dimmer"></div></div></main><footer id="footer"><div class="inner"><div class="widgets"><div class="rpost pjax"><h2>随机文章</h2><ul><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2023/12/24/Docker-desktop%E9%83%A8%E7%BD%B2nacos/" title="Docker desktop部署nacos">Docker desktop部署nacos</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2023/10/28/Windows%E4%B8%8B%E5%BF%AB%E9%80%9F%E9%83%A8%E7%BD%B2SpringBoot%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%89%B9%E5%A4%84%E7%90%86/" title="Windows下快速部署SpringBoot项目的批处理">Windows下快速部署SpringBoot项目的批处理</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/Vue/" title="分类于 Vue">Vue</a></div><span><a href="/2022/11/04/%E8%AE%B0%E4%B8%80%E6%AC%A1Vue%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E7%BD%B2/" title="记一次Vue项目的部署">记一次Vue项目的部署</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Linux/" title="分类于 Linux">Linux</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/" title="分类于 服务">服务</a></div><span><a href="/2022/10/17/redis%E4%B8%BB%E4%BB%8E%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE%E8%AE%B0%E5%BD%95/" title="redis主从基础配置">redis主从基础配置</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2023/05/30/http%E8%AF%B7%E6%B1%82%E4%B9%8BrestTemplate%E9%85%8D%E7%BD%AE%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4/" title="http请求之restTemplate配置超时时间">http请求之restTemplate配置超时时间</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2023/07/08/%E8%A7%A3%E5%86%B3Lombok%E6%8A%A5%E9%94%99/" title="解决Lombok报错">解决Lombok报错</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2024/01/03/Centos7%E7%BC%96%E8%AF%91%E5%8D%87%E7%BA%A7nginx/" title="Centos7编译升级nginx">Centos7编译升级nginx</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/Highcharts/" title="分类于 Highcharts">Highcharts</a></div><span><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" title="Highcharts画收益概览">Highcharts画收益概览</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2023/05/25/%E8%A7%A3%E5%86%B3MySQL%E6%8A%A5only-full-group-by%E9%94%99%E8%AF%AF/" title="解决MySQL报only_full_group_by错误">解决MySQL报only_full_group_by错误</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/11/13/%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/" title="数据库管理工具">数据库管理工具</a></span></li></ul></div><div><h2>最新评论</h2><ul class="leancloud-recent-comment"></ul></div></div><div class="status"><div class="copyright">&copy; 2010 <span itemprop="copyrightYear">2024</span> <span class="with-love"><i class="ic i-sakura rotate"></i> </span><span class="author" itemprop="copyrightHolder">Hito Li @ ☆∵∴Hito∴∵★</span></div><div class="count"><span class="post-meta-item-icon"><i class="ic i-chart-area"></i> </span><span title="站点总字数">121k 字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="ic i-coffee"></i> </span><span title="站点阅读时长">1:50</span></div><div class="powered-by">基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span></div></div></div></footer></div><script data-config type="text/javascript">var LOCAL={path:"2023/01/10/Vue根据路由传参修改页面数据/",favicon:{show:"´3哎呀呀",hide:"(´Д`)真糟糕!"},search:{placeholder:"文章搜索",empty:"关于 「 ${query} 」,什么也没搜到",stats:"${time} ms 内找到 ${hits} 条结果"},valine:!0,fancybox:!0,copyright:'复制成功,转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',ignores:[function(e){return e.includes("#")},function(e){return new RegExp(LOCAL.path+"$").test(e)}]}</script><script src="https://nas.hitoli.com:18003/assets/polyfill.js"></script><script src="https://nas.hitoli.com:18003/assets/pace.min.js"></script><script src="https://nas.hitoli.com:18003/assets/pjax.min.js"></script><script src="https://nas.hitoli.com:18003/assets/fetch.umd.js"></script><script src="https://nas.hitoli.com:18003/assets/anime.min.js"></script><script src="https://nas.hitoli.com:18003/assets/algoliasearch-lite.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/instantsearch.production.min.js"></script><script src="https://nas.hitoli.com:18003/assets/lozad.min.js"></script><script src="https://nas.hitoli.com:18003/assets/quicklink.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/jquery.min.js,jquery.fancybox.min.js,jquery.justifiedGallery.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/MiniValine.min.js"></script><script src="https://nas.hitoli.com:18003/assets/copy-tex.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/frappe-charts.min.iife.js"></script><script src="/js/app.js?v=0.0.0"></script></body></html>