Router路由的使用
目录
一.Vue Router的使用：
二.使用vue-router来实现登录页面与主页面展示效果：
1.创建 index.js ：
2.在 main.js 导入创建的路由器：
3.在App.vue声明标签：
三.子路由的使用：
1.添加五个组件
2.配置子路由：在内部先定义路由关系，然后创建路由器，最后导出(暴露)路由器。
3.在主页面的展示区声明router-view标签：
4.给菜单项设置index属性，设置点击后的路由地址：
路由指的是根据不同的访问路径，展示不同组件的内容。
Vue Router 是 Vue.js 的官方路由。
一.Vue Router的使用：
安装vue-router： cnpm install vue-router@4
在src/router/index.js中创建路由器，并导出
在vue应用实例中使用vue-router
声明router-view标签，展示组件内容
二.使用vue-router来实现登录页面与主页面展示效果：
1.创建 index.js ：
//导入vue-router
import { createRouter , createWebHistory } from "vue-router";//导入vue组件
import LoginVue from '@/views/Login.vue';
import LayoutVue from "@/views/Layout.vue";//定义路由关系
const routes = [{path:'/login',component: LoginVue},{path:'/', //设置访问路径component: LayoutVue, //设置访问路径对应的访问组件}
]//创建路由器
const router = createRouter({history: createWebHistory(), //路由模式routes: routes //路由关系
})//导出路由器
export default router;2.在 main.js 导入创建的路由器：
import './assets/main.scss'import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
//导入创建的路由器
//index.js可以省略不写，会默认导入该文件
import router from '@/router'const app = createApp(App);
//将router传递至App.vue
app.use(router)
app.use(ElementPlus);
app.mount('#app')3.在App.vue声明标签：
<script setup></script><template><router-view></router-view>
</template><style></style>这样就可以实现在同一页面显示不同组件。但是这样如果我们登录成功后，不会直接跳转主页面，那么这个时候我们需要通过路由来完成跳转主页面。
//导入路由器
import { useRouter } from 'vue-router';
const router = useRouter();
//通过路由跳转首页
router.push('跳转路径');
所以在login.vue文件内进行操作：//导入路由器
import { useRouter } from 'vue-router';
const router = useRouter();
//表单数据校验
const login = async()=>{let result = await userLoginService(registerData.value);ElMessage.success(result.msg ? result.msg : '登录成功');//通过路由跳转首页router.push('/');
}三.子路由的使用：
为了在我们主页面下展示区点击按钮展示不同的子组件，我们就引入了子路由的知识：
上图是我们的每一级路由关系，我们想将五个vue文件在主页面Layout.vue中的展示区展示，就需要配置子路由 =>
1.添加五个组件
2.配置子路由：
在内部先定义路由关系，然后创建路由器，最后导出(暴露)路由器。
在路由关系内主页面内部设置 children 属性来声明五个子路由，并且为了不让主页面'/'为空，我们使用 redirect 来将 '/' 地址重定向为 '/article/manage' =>
//导入vue-router
import { createRouter , createWebHistory } from "vue-router";//导入vue组件
import LoginVue from '@/views/Login.vue';
import LayoutVue from "@/views/Layout.vue";
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
import UserAvatarVue from '@/views/user/UserAvatar.vue'
import UserInfoVue from '@/views/user/UserInfo.vue'
import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'//定义路由关系
const routes = [{path:'/login',component: LoginVue},{path:'/',component: LayoutVue,redirect: '/article/manage', //重定向//子路由children:[{path:'/article/category',component: ArticleCategoryVue},{path:'/article/manage',component: ArticleManageVue},{path:'/user/avatar',component: UserAvatarVue},{path:'/user/info',component: UserInfoVue},{path:'/user/resetPassword',component: UserResetPasswordVue},]}
]//创建路由器
const router = createRouter({history: createWebHistory(), //路由模式routes: routes //路由关系
})//导出路由器
export default router;3.在主页面的展示区声明router-view标签：
<!-- 中间区域 --><el-main><!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">内容展示区</div> --><!-- 路由 --><router-view></router-view></el-main>4.给菜单项设置index属性，设置点击后的路由地址：
这样设置后，当我们点击文字时候就可以自动在我们设置的标签router-view展示区来展示index='地址'中的地址。
<!-- 左侧菜单 -->
<el-aside width="200px"><div class="el-aside__logo"></div><el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"router><el-menu-item index="/article/category"><el-icon><Management /></el-icon><span>文章分类</span></el-menu-item><el-menu-item index="/article/manage"><el-icon><Promotion /></el-icon><span>文章管理</span></el-menu-item><el-sub-menu ><template #title><el-icon><UserFilled /></el-icon><span>个人中心</span></template><el-menu-item index="/user/info"><el-icon><User /></el-icon><span>基本资料</span></el-menu-item><el-menu-item index="/user/avatar"><el-icon><Crop /></el-icon><span>更换头像</span></el-menu-item><el-menu-item index="/user/resetPassword"><el-icon><EditPen /></el-icon><span>重置密码</span></el-menu-item></el-sub-menu></el-menu>
</el-aside>所以这样我们就分别对五个vue组件开发就可以了。