路由

17.Vue3/project2/src/App.vue

@@ -3,9 +3,11 @@
     <h1>App</h1>
     <!-- <router-view></router-view> -->
      <div class="nav">
-      <RouterLink to="/my">我的</RouterLink>
-      <RouterLink to="/home">首页</RouterLink>
-      <RouterLink to="/list">列表</RouterLink>
+      <RouterLink active-class="news" to="/my">我的</RouterLink>
+      <RouterLink active-class="news" :to="{
+       name:'zhuye'
+      }">首页</RouterLink>
+      <RouterLink active-class="news" to="/list">列表</RouterLink>
      </div>
     <RouterView></RouterView>
   </div>
@@ -18,6 +20,16 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped> 
+.nav {
+  width: 300px;
+  display: flex;
+  /* justify-content: center; */
+}
+.nav a {
+  flex: 1;
+}
+.news {
+  color: red;
+}
 </style>

17.Vue3/project2/src/router/index.js

@@ -6,11 +6,13 @@ import My from '../views/My.vue';
 const routes = [
     {
         path: "/home",
-        component: Home
+        component: Home,
+        name:'zhuye'
     },
     {
         path: "/list",
-        component: List
+        component: List,
+        name:'liebiao'
     },
     {
         path: "/my",
@@ -22,10 +24,23 @@ const routes = [
 const router = createRouter({
     // 定义路由模式
     history: createWebHashHistory(),
+    // 路由路径配置
     routes
 });
 
 // 3.导出路由对象
 export default router;
 
-// history hash区别
+// history hash区别
+// history: 
+// 优点
+// 需要后端支持，刷新不会丢失路由信息
+// Url是更加美观 更接近传统网站的url
+// 缺点
+// 当后期项目上线 需要服务端配合处理路径问题 否则刷新会有404
+// hash:
+// 优点
+// 兼容性更好 不需要服务端处理
+// 缺点
+// url带有#号 不美观 在SEO优化方面相对较差
+