用来渲染一个链接的组件，该链接在被点击时会触发导航
全局组件；不需要在组件模板中导入；参见 main.js
不会刷新页面 - doesn't need to be reloaded from the server
RouterLinkProps
| item |
desc |
| to |
当点击该链接时应该进入的路由地址
使用 to 属性代替 href 属性
|
| replace |
默认是 push 模式，浏览器可以回退
使用 replace 属性可以防止浏览器回退
|
| activeClass |
链接在匹配当前路由时被应用到 class
|
| exactActiveClass |
链接在严格匹配当前路由时被应用到 class
多用于嵌套路由中
|
1. 使用普通路由 - 字符串方法
<router-link to = "/home" >home</router-link>
<router-link to = "/team" >team</router-link>
<router-link to = "/about" replace >about</router-link>
2. 使用嵌套路由 - 指定完整路由
<router-link to = "/work/html" >html</router-link>
<router-link to = "/work/css3" >css3</router-link>
<router-link to = "/work/js" >js</router-link>
用于显示用户当前所处路由的组件
全局组件；不需要在组件模板中导入；参见 main.js
路由目标占位符
借助系统组件 <router-view> 显示与 URL 对应的组件|路由出口 - where to render the current route component
有 <router-link> 路由，则必须有 <router-view> 路由出口
还可以像缓存组件那样，缓存 <router-view>，见后例
1. 单 <router-view>
对于单页应用 SPA，需要根据路由动态切换视图，必须有一个
应用更为常见
2. 多 <router-view>
允许你在同一个页面同时展示多个组件，每个组件对应不同的视图区域，提高了单页应用的复用性和可维护性
路由配置由 component 该为 components
{
path: '/',
name: 'home',
components: {
default: () => import('../views/Home.vue'),
aside: () => import('../components/Aside.vue'),
header: () => import('../components/Header.vue'),
main: () => import('../components/Main.vue'),
}
}
多个 <router-view> 使用 name 属性区分，避免嵌套路由
<router-view name="aside"></router-view>
<router-view name="header"></router-view>
<router-view name="main"></router-view>
