# 路由
> 路由是服务端的概念,只得的是端口号后,?参数前的地址 为路由.
> 什么地址加载什么组件。
## 路由有哪些内容?
- 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>