refactor: use <nav> instead of <div id="nav">

haoqunjiang · haoqunjiang · commit a98452000a38 · 2021-11-23T16:58:17.000+08:00
See vuejs/vue-cli#6812
diff --git 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
@@ -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;
