VueRouter

前言

VueRouter（以下称为route）是Vue提供的路由组件，主要由3方面构成：

router-link：请求链接组件，浏览器会解析成a标签
router-view：动态视图组件，用来渲染展示与路由路径对应的组件
路由表router如下图

下面我们从三个角度了解route

router-link

该标签通常添加在button，menu等标签外，表示点击该组件，启动路由跳到下一个页面，例如

<router-link to=""> //添加下一跳的地址
    <el-menu-item index="/index">
      	<el-icon><Promotion /></el-icon> 首页
    </el-menu-item>
</router-link>

element的menu组件中集成了该功能上述代码等价于

<el-menu router>
    <el-menu-item index="/index">
      	<el-icon><Promotion /></el-icon> 首页
    </el-menu-item>
</el-menu>

在顶级菜单栏中添加"router"即可，会自动根据index中的内容寻找下一跳的地址

router-view

动态渲染组件，将下一跳的组件在标签位置渲染出来，通常加在具有container功能的标签内。例如

<el-main>
    <router-view></router-view>
</el-main>
//下一跳的组件将加载在<el-main></el_main>的内容里

路由表router

决定该路径下，访问的组件是什么。

import { createRouter, createWebHistory} from 'vue-router';

//导入IndexView组件
import IndexView from '@/views/index/index.vue';

const routes = [
//配置路由信息
  { path: '/index', component: IndexView },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;