vue3路由基础

# 路由

> 路由是服务端的概念，只得的是端口号后，?参数前的地址 为路由.

> 什么地址加载什么组件。

## 路由有哪些内容？

- 1：修改url地址方式

  - 组件

  - 编程式导航

- 2：展示理由组件的内容

  - 组件

##　路由渲染的过程

- 1：url地址发生改变

- 2：获取路由地址部分，模糊匹配路由配置对象。默认根据path匹配

- 3：在Router-view组件渲染，由匹配到的路由配置对象中，注册的路由组件。

**bug:假设页面中预期的路由组件没有加载怎么排错**

- 1：path中注册的组件是否存在

- 2：是否忘记编写Router-view

1.在 main.js 文件中配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)

app.use(router)  // 注意：必须再跟模板之间，才有效

app.mount('#app')

2.router 文件下 index.js  路由基础配置

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
/**
 * createRouter 作用创建路由实例对象
 * 参书：配置对象
 */
const router = createRouter({
  // history:创建落于模式
  /**
   * createWebHistory() 
   */
  history: createWebHistory(import.meta.env.BASE_URL),
  // routes 编写路由配置
  routes: [
    {
      path: '/', // 设置匹配的地址
      name: 'home', // 路由名，建议唯一
      component: HomeView // 同步注册路由组件
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue') // 异步注册路由组件
    }
  ]
})

export default router

3.app.vue  文件

<template>
  <nav>
    <ul>
      <li>
        <!-- 
          router-link作用修改浏览器中url地址（路由地址）
          默认转化为a标签

          to 链接的地址。
         -->
        <RouterLink to="/">首页</RouterLink>
      </li>
      <li>
        <RouterLink to="/about">关于</RouterLink>
      </li>
    </ul>
  </nav>
  <main>
    <!-- RouterView作用渲染路由 -->
    <RouterView />
  </main>
</template>
<script setup>
// 与之前版本不同地方：
// 1：注册组件
// 2：使用
import { RouterLink, RouterView } from 'vue-router'
</script>