# 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> ``` ``` 这样就可以实现所需功能