fix : accessibility issue for the navigation (#6812) [skip ci]

Co-authored-by: MasihTak <masihtak@outlook.com>

Fixes #6811

Author: MasihTak

packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue

@@ -8,10 +8,10 @@ replace:
 
 <%# REPLACE %>
 <template>
-  <div id="nav">
+  <nav>
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
-  </div>
+  </nav>
   <router-view/>
 </template>
 <%# END_REPLACE %>
@@ -24,20 +24,20 @@ replace:
 
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
   <%_ if (!rootOptions.cssPreprocessor) { _%>
-#nav {
+nav {
   padding: 30px;
 }
 
-#nav a {
+nav a {
   font-weight: bold;
   color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: #42b983;
 }
   <%_ } else { _%>
-#nav {
+nav {
   padding: 30px;
 
   a {
@@ -51,7 +51,7 @@ replace:
 }
   <%_ } _%>
 <%_ } else { _%>
-#nav
+nav
   padding 30px
   a
     font-weight bold

packages/@vue/cli-plugin-router/generator/template/src/App.vue

@@ -9,10 +9,10 @@ replace:
 <%# REPLACE %>
 <template>
   <div id="app">
-    <div id="nav">
+    <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
+    </nav>
     <router-view/>
   </div>
 </template>
@@ -26,20 +26,20 @@ replace:
 
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
   <%_ if (!rootOptions.cssPreprocessor) { _%>
-#nav {
+nav {
   padding: 30px;
 }
 
-#nav a {
+nav a {
   font-weight: bold;
   color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
+nav a.router-link-exact-active {
   color: #42b983;
 }
   <%_ } else { _%>
-#nav {
+nav {
   padding: 30px;
 
   a {
@@ -53,7 +53,7 @@ replace:
 }
   <%_ } _%>
 <%_ } else { _%>
-#nav
+nav
   padding 30px
   a
     font-weight bold