# vue中路由詳解 # 路由嵌套 **子頁面源碼 loginmessage 和 loginnews** loginnews源碼: ``` <pre class="calibre13">``` <span class="token"><</span>template<span class="token">></span> <span class="token"><</span>div<span class="token">></span> <span class="token"><</span>ul<span class="token">></span> <span class="token"><</span>li<span class="token">></span>新聞<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>新聞<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>新聞<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>新聞<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>新聞<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span><span class="token">/</span>ul<span class="token">></span> <span class="token"><</span><span class="token">/</span>div<span class="token">></span> <span class="token"><</span><span class="token">/</span>template<span class="token">></span> <span class="token"><</span>script<span class="token">></span> <span class="token2">export</span> <span class="token2">default</span> <span class="token1">{</span> name<span class="token1">:</span> <span class="token4">'LoginNews'</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>script<span class="token">></span> <span class="token"><</span>style scoped<span class="token">></span> <span class="token"><</span><span class="token">/</span>style<span class="token">></span> ``` ``` loginmessage源碼: ``` <pre class="calibre13">``` <span class="token"><</span>template<span class="token">></span> <span class="token"><</span>div<span class="token">></span> <span class="token"><</span>ul<span class="token">></span> <span class="token"><</span>li<span class="token">></span>消息<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>消息<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>消息<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>消息<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span>li<span class="token">></span>消息<span class="token"><</span><span class="token">/</span>li<span class="token">></span> <span class="token"><</span><span class="token">/</span>ul<span class="token">></span> <span class="token"><</span><span class="token">/</span>div<span class="token">></span> <span class="token"><</span><span class="token">/</span>template<span class="token">></span> <span class="token"><</span>script<span class="token">></span> <span class="token2">export</span> <span class="token2">default</span> <span class="token1">{</span> name<span class="token1">:</span> <span class="token4">'LoginMessage'</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>script<span class="token">></span> <span class="token"><</span>style scoped<span class="token">></span> <span class="token"><</span><span class="token">/</span>style<span class="token">></span> ``` ``` 在路由中進行注冊: router->index.js: ``` <pre class="calibre13">``` <span class="token2">import</span> Vue <span class="token2">from</span> <span class="token4">'vue'</span> <span class="token2">import</span> VueRouter <span class="token2">from</span> <span class="token4">'vue-router'</span> <span class="token2">import</span> Register <span class="token2">from</span> <span class="token4">'../components/Register'</span> <span class="token2">const</span> <span class="token3">Login</span> <span class="token">=</span> <span class="token1">(</span><span class="token1">)</span> <span class="token">=></span> <span class="token2">import</span><span class="token1">(</span><span class="token4">'../components/Login.vue'</span><span class="token1">)</span> <span class="token2">const</span> <span class="token3">loginnews</span> <span class="token">=</span> <span class="token1">(</span><span class="token1">)</span> <span class="token">=></span> <span class="token2">import</span><span class="token1">(</span><span class="token4">'../components/LoginNews.vue'</span><span class="token1">)</span> <span class="token2">const</span> <span class="token3">loginmessage</span> <span class="token">=</span> <span class="token1">(</span><span class="token1">)</span> <span class="token">=></span> <span class="token2">import</span><span class="token1">(</span><span class="token4">'../components/LoginMessage.vue'</span><span class="token1">)</span> Vue<span class="token1">.</span><span class="token3">use</span><span class="token1">(</span>VueRouter<span class="token1">)</span> <span class="token2">const</span> routes <span class="token">=</span> <span class="token1">[</span> <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">''</span><span class="token1">,</span> redirect<span class="token1">:</span> <span class="token4">'/login'</span> <span class="token1">}</span><span class="token1">,</span> <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><span class="token1">,</span> children<span class="token1">:</span> <span class="token1">[</span> <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">''</span><span class="token1">,</span> redirect<span class="token1">:</span> <span class="token4">'loginnews'</span> <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">'loginnews'</span><span class="token1">,</span> component<span class="token1">:</span> loginnews <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">'loginmessage'</span><span class="token1">,</span> component<span class="token1">:</span> loginmessage <span class="token1">}</span> <span class="token1">]</span> <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span> path<span class="token1">:</span> <span class="token4">'/register'</span><span class="token1">,</span> name<span class="token1">:</span> Register<span class="token1">,</span> component<span class="token1">:</span> Register<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> <span class="token1">}</span> <span class="token1">]</span> <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> mode<span class="token1">:</span> <span class="token4">'history'</span> <span class="token1">}</span><span class="token1">)</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 <span class="token6">// console.log(to)</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> <span class="token2">export</span> <span class="token2">default</span> router ``` ``` # 路由嵌套