一、路由组件与一般组件的区别

1.1 【两个注意点】

1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

1.2 什么是一般组件，什么又是特殊组件呢？

1.2.1 一般组件

• 定义：开发者自己创建、手动引入并在父组件中通过 components 选项注册，然后在模板中以标签形式使用的组件。
• 存放位置：通常放在 components 文件夹中。
• 特点：
  • 不依赖路由，可以在任何地方复用。
  • 通过 props、events 等与父组件通信。
  • 不会被路由自动卸载/挂载，其生命周期跟随父组件。
• 示例：按钮组件、输入框组件、导航栏组件、模态框组件等。

1.2.2 路由组件（常被称为“特殊组件”）

• 定义：与路由规则绑定的组件，由 Vue Router 根据当前 URL 动态渲染，通常通过 <router-view> 占位符展示。
• 存放位置：通常放在 pages 或 views 文件夹中。
• 特点：
  • 不需要手动引入到父组件中，而是由路由配置决定何时显示。
  • 切换路由时，旧的路由组件会被卸载，新的路由组件会被挂载（因此 created 或 mounted 每次都会重新执行）。
  • 可以接收路由参数（params、query），并可使用路由守卫（如 beforeRouteEnter）实现特定逻辑。
• 示例：首页组件（Home.vue）、关于页面组件（About.vue）、用户详情页组件（UserDetail.vue）。

二.【路由器工作模式】

导入方式：import { createWebHistory } from ‘vue-router’

2.1 history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

 const router = createRouter({
     history:createWebHistory(), //history模式
     /******/
 })

2.2 hash模式

导入方式：import { createWebHashHistory } from ‘vue-router’

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。

 const router = createRouter({
     history:createWebHashHistory(), //hash模式
     /******/
 })

不管点击哪个路由都会多一个#，不美观

三、 【to的两种写法】

3.1 第一种： 字符串写法

（适用场景：简单的路径跳转，不需要额外参数）

 <router-link active-class="active" to="/home">主页</router-link>

3.2 第二种：对象写法

（适用场景：需要传递命名参数、查询参数或更复杂的导航控制）

 <router-link active-class="active" :to="{path:'/home'}">Home</router-link>

四、【命名路由】

两步走

4.1 给每个路由配置 name 属性

在路由规则中为路由添加唯一的 name 标识。

4.2 简化跳转：通过对象写法配合 name 属性进行跳转

为什么需要加入命名路由和对象路由path和name？

• 命名路由：当项目路由较多或路径较长时，使用 name 跳转可以避免硬编码 URL，便于后期维护。如果路径发生变化，只需修改路由配置中的 path，所有使用 name 跳转的地方无需改动。
• 对象写法的优势：除了可以传递 name 或 path，还能附带 params（动态路由参数）和 query（查询字符串），实现更复杂的路由传参。相比于字符串写法，对象写法更加结构化，可读性和可维护性更好。

五、【嵌套路由】

5.1 编写子路由组件

<template>
  <p>牛逼666</p>
</template>
<script setup lang="ts"></script>
<style scoped></style>

5.2 配置路由规则，使用 children 属性

// 创建路由并且暴露

// 第一步，引入createRouter
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Rolonews from '@/pages/Rolonews.vue'
import Details from '@/components/details.vue'

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 第二步，创建路由
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    {
      path: '/news',
      name: 'News',
      component: News,
      children: [
        {
          path: 'rolonews',
          name: 'Rolonews',
          component: Rolonews,
        },
      ],
    },
    {
      path: '/details',
      name: 'Details',
      component: Details,
    },
  ],
})

// 第三步,暴露路由
export default router

属性为children，是数组

5.3 跳转路由（记得要加完整路径）

在父路由组件（如 News.vue）中使用 <router-view> 作为子路由的展示区，并通过 <router-link> 配置跳转路径。子路由的 to 必须写完整路径（从根路径开始），或者使用对象写法。

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="rolo in roloList" :key="rolo.id">
        <RouterLink :to="{ path: '/rolonews' }">{{ rolo.rolo }}</RouterLink>
        <RouterLink to="/news/rolonews">{{ rolo.skill }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView } from 'vue-router'
const roloList = reactive([
  {
    id: 1,
    rolo: '老大',
    skill: '后仰跳投',
  },
  {
    id: 2,
    rolo: '库里',
    skill: 'logo三分',
  },
  {
    id: 3,
    rolo: '詹姆斯',
    skill: '罚球线暴扣',
  },
])
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

两种to写法

嵌套路由注意事项：子路由的 path 不要以 / 开头，否则会忽略父路由的路径，变成绝对路径。另外，在父组件中必须使用 <router-view> 来渲染子路由组件，否则子路由内容不会显示。