- <a>
-
Html 原生标签
页面会重新加载/刷新
- <router-link>
-
自定义组件 <router-link>；使用属性 to 代替了属性 href
不会刷新页面
- <router-view>
-
路由目标占位符
借助系统组件 <router-view> 显示与 URL 对应的组件|路由出口
有 <router-link> 路由，则必须有 <router-view> 路由出口
还可以像缓存组件那样，缓存 <router-view>
- Configuration
-
按照值对形式 name-value pair 配置路由，即把 URL 路径映射到组件；其中，路径 path 和组件 component 是必填项
所有的路由配置位于项目文件夹 src → router 中，通常是 index.js
1. 路径 path
/ 代表根路由
2. 组件 component
引入组件时，可以省略后缀名 .vue
每一个组件都是一个视图 view
每一个组件都是一个单文件组件 SFC - Single File Component
单页面应用 SPA - Single Page Application
路由配置属性
| 属性 |
说明 |
| path |
路由；必填 |
| component |
对应路由的组件；必填 |
| name |
命名路由：通过名字来指定路由；不能重复；更直观、灵活，简化路由使用，如动态路由 |
| redirect |
重定向路由：让指定的路由重新定位到另外一个路由 |
| children |
嵌套路由、子路由；嵌套路由通常需要使用重定向 |
| meta |
路由元信息：用于路由组件的额外配置 |
| props |
是否启用路由参数；可以接收动态路由参数和查询路由参数 |
- Normal import
-
系统就绪时，所有组件都已经导入
import HomeView from "@/views/HomeView.vue";
import TeamView from "@/views/TeamView.vue";
const routes = [
{ path: '/', component: HomeView },
{ path: '/team', component: TeamView },
]
- Dynamic import
-
动态导入 - Dynamic import；懒加载，需要的时候才加载
const routes = [
{ path: '/', component: () => import("../views/TeamView.vue") },
{ path: '/about', component: () => import("../views/HomeView.vue") },
]