<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>路由 on Roam Tech-verse | Roamverse Technical Blog</title>
    <link>/notes/vue/routers/</link>
    <description>Recent content in 路由 on Roam Tech-verse | Roamverse Technical Blog</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <copyright>Copyright © 2020-2026 Razon Yang. All Rights Reserved.
</copyright><atom:link href="/notes/vue/routers/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Vue Router 两种工作模式</title>
      <link>/notes/vue/routers/two-modes/</link>
      <pubDate>Thu, 28 Sep 2023 14:09:10 +0800</pubDate>
      <guid>/notes/vue/routers/two-modes/</guid>
      <description><![CDATA[<p>Vue Router中有两种工作模式，它们分别是：</p>
<ul>
<li>
<p><code>hash</code>模式：使用URL的<code>hash</code>来模拟一个完整的URL。</p>
<p><code>hash</code>：在URL中，<code>#</code>符号及其之后的内容。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 路由守卫</title>
      <link>/notes/vue/routers/guards/</link>
      <pubDate>Wed, 27 Sep 2023 11:17:58 +0800</pubDate>
      <guid>/notes/vue/routers/guards/</guid>
      <description><![CDATA[<p>Vue Router提供的路由守卫主要用来通过<strong>跳转</strong>或<strong>取消</strong>的方式守卫导航。</p>
<p>在路由守卫中，你可以自定义何时何种情况<strong>放行</strong>或<strong>拦截</strong>页面的路由。通过Vue Router，可以实现对前端页面路由的权限控制。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 路由组件钩子</title>
      <link>/notes/vue/routers/hooks/</link>
      <pubDate>Tue, 26 Sep 2023 16:28:34 +0800</pubDate>
      <guid>/notes/vue/routers/hooks/</guid>
      <description><![CDATA[<h1 id="路由组件生命周期钩子" data-numberify>路由组件生命周期钩子<a class="anchor ms-1" href="#路由组件生命周期钩子"></a></h1>
<p>Vue路由组件除了能使用组件的那些生命钩子外，还能使用两个专用于路由组件的生命周期钩子。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 路由组件缓存</title>
      <link>/notes/vue/routers/cache/</link>
      <pubDate>Tue, 26 Sep 2023 15:12:36 +0800</pubDate>
      <guid>/notes/vue/routers/cache/</guid>
      <description><![CDATA[<p>Vue Router中，开启路由组件缓存可以使用<code>&lt;keep-alive&gt;</code>将<code>&lt;router-view&gt;</code>包裹起来。使用了<code>&lt;keep-alive&gt;</code>之后，路由组件被用户切换掉时，不会被销毁。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 编程式路由导航</title>
      <link>/notes/vue/routers/navigation/</link>
      <pubDate>Tue, 26 Sep 2023 13:19:57 +0800</pubDate>
      <guid>/notes/vue/routers/navigation/</guid>
      <description><![CDATA[<p>编程式路由导航是指不通过<code>&lt;router-link&gt;</code>创建<code>&lt;a&gt;</code>标签来定义导航链接，而是借助路由组件实例中的<code>$router</code>实例，通过编写代码来实现路由导航。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 路由通过 Props 传参</title>
      <link>/notes/vue/routers/passing-props/</link>
      <pubDate>Tue, 26 Sep 2023 10:27:58 +0800</pubDate>
      <guid>/notes/vue/routers/passing-props/</guid>
      <description><![CDATA[<p>路由的<code>props</code>配置可以让路由组件更方便地接收到参数。在组件中使用<code>$route</code>会让组件与路由紧耦合（使用组件必须配置路由）。通过<code>props</code>可以解除组件与路由的紧耦合。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 嵌套路由</title>
      <link>/notes/vue/routers/nested-routes/</link>
      <pubDate>Mon, 25 Sep 2023 04:29:24 +0000</pubDate>
      <guid>/notes/vue/routers/nested-routes/</guid>
      <description><![CDATA[<p>Vue 嵌套路由又称多级路由。一些应用程序的UI由多层嵌套的组件组成（即一个路由下又配置了其它几个路由）。通过Vue Router，可以使用嵌套路由配置来表达这种关系。</p>]]></description>
    </item>
    
    <item>
      <title>Vue 动态路由匹配</title>
      <link>/notes/vue/routers/dynamic-matching/</link>
      <pubDate>Mon, 25 Sep 2023 04:27:20 +0000</pubDate>
      <guid>/notes/vue/routers/dynamic-matching/</guid>
      <description><![CDATA[<p>在Vue Router中，路由路径有以下几种匹配形式：</p>
<ul>
<li><strong>静态匹配</strong>：即完全按照<code>path</code>中的内容，进行相等匹配。</li>
<li><strong>动态匹配</strong>：根据<code>path</code>中定义的路径匹配规则匹配多个路径。</li>
</ul>
<hr>

<h1 id="路径参数" data-numberify>路径参数<a class="anchor ms-1" href="#路径参数"></a></h1>
<p>Vue中的动态参数匹配使用的是<strong>路径参数匹配</strong>。路径参数是路径中的一个动态字段。路径参数的值会动态变化，根据这些路径参数的值，可以读取相应的数据或展示相应的页面。</p>]]></description>
    </item>
    
    <item>
      <title>Vue Router 入门</title>
      <link>/notes/vue/routers/introduction/</link>
      <pubDate>Sat, 23 Sep 2023 05:27:36 +0000</pubDate>
      <guid>/notes/vue/routers/introduction/</guid>
      <description><![CDATA[<p>Vue.js路由（Router）允许通过不同的URL访问不同的内容。通过Vue Router，可以实现SPA（Single Page web Application，单页Web应用）。</p>]]></description>
    </item>
    
  </channel>
</rss>

