From a98452000a388b1c1e9b615a2e1ffaa73d058b98 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 23 Nov 2021 16:58:17 +0800
Subject: [PATCH] refactor: use `<nav>` instead of `<div id="nav">`

See https://github.com/vuejs/vue-cli/pull/6812
---
 template/code/router/src/App.vue            | 16 ++++++++--------
 template/code/typescript-router/src/App.vue | 16 ++++++++--------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue
index fe3afbf6..37edbaf4 100644
--- a/template/code/router/src/App.vue
+++ b/template/code/router/src/App.vue
@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;
diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue
index 36ae7808..8a1e9b19 100644
--- a/template/code/typescript-router/src/App.vue
+++ b/template/code/typescript-router/src/App.vue
@@ -9,10 +9,10 @@ import HelloWorld from '@/components/HelloWorld.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
 
-      <div id="nav">
+      <nav>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-      </div>
+      </nav>
     </div>
   </header>
 
@@ -53,28 +53,28 @@ a,
   }
 }
 
-#nav {
+nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
-#nav a.router-link-exact-active:hover {
+nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-#nav a {
+nav a {
   display: inline-block;
   padding: 0 1rem;
   border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
+nav a:first-of-type {
   border: 0;
 }
 
@@ -106,7 +106,7 @@ a,
     margin: 0 2rem 0 0;
   }
 
-  #nav {
+  nav {
     text-align: left;
     margin-left: -1rem;
     font-size: 1rem;
-- 
2.39.5