# vue的導航守衛 # 路由導航 > 網頁標題是通過title來顯示的 切換不同的頁面時 標題并不會發生改變 > 如果是在已經寫好的頁面中 增加 當用戶點擊每個頁面的時候 標題是對應設置的標題 > 首先需要在路由文件中中增加meta屬性 設置title的初始化數據 ``` <pre class="calibre13">``` <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">'/login'</span><span class="token1">,</span> name<span class="token1">:</span> Login<span class="token1">,</span> component<span class="token1">:</span> Login<span class="token1">,</span> meta<span class="token1">:</span> <span class="token1">{</span> title<span class="token1">:</span> <span class="token4">'登錄頭'</span> <span class="token1">}</span> ``` ``` > 然后使用 beforeeach方法 ``` <pre class="calibre13">``` <span class="token2">const</span> router <span class="token">=</span> <span class="token2">new</span> <span class="token3">VueRouter</span><span class="token1">(</span><span class="token1">{</span> routes <span class="token1">}</span><span class="token1">)</span> <span class="token6">//前置守衛(guard)</span> router<span class="token1">.</span><span class="token3">beforeEach</span><span class="token1">(</span><span class="token1">(</span>to<span class="token1">,</span> <span class="token2">from</span><span class="token1">,</span> next<span class="token1">)</span> <span class="token">=></span> <span class="token1">{</span> <span class="token2">if</span> <span class="token1">(</span>to<span class="token1">.</span>fullPath <span class="token">===</span> <span class="token4">'/login'</span><span class="token1">)</span> <span class="token1">{</span> document<span class="token1">.</span>title <span class="token">=</span> to<span class="token1">.</span>matched<span class="token1">[</span><span class="token5">0</span><span class="token1">]</span><span class="token1">.</span>meta<span class="token1">.</span>title console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>to<span class="token1">)</span> <span class="token1">}</span> <span class="token3">next</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">}</span><span class="token1">)</span> ``` ``` 這樣就可以實現所需功能