路由--->用来实现不同页面的跳转

常规需要再APP.vue中导入我们的页面,但同一个时间只能显示一个页面,页面的改变需要我们进行手动添加或者修改, 使用路由就可以实现一次添加多个页面,并且实现不用页面的跳转,非常的好用!!!

1.添加路由---->npm install vue-router@4

2.配置路由器

import {createRouter, createWebHashHistory} from 'vue-router'

//导入组件
import LoginDome from '@/views/LoginDome.vue'
import Layout from '@/views/LayOutDome.vue'
import ArticleCategory from '@/views/article/ArticleCategory.vue'
import ArticleManage from '@/views/article/ArticleManage.vue'
import UserAvatar from '@/views/user/UserAvatar.vue'
import UserInfo from '@/views/user/UserInfo.vue'
import UserResetPassword from '@/views/user/UserResetPassword.vue'
//定义路由
const routes = [
    {path: '/login',
        component: LoginDome------------------------------------------------>第一个路由
    },
    {   path: '/',
        component: Layout,
        redirect: '/article/manage',---------------------------------------->第二个路由
        children: [---------------------------------------------------------->子路由
            {path: '/article/category', component: ArticleCategory},
            {path: '/article/manage', component: ArticleManage},
            {path: '/user/avatar', component: UserAvatar},
            {path: '/user/info', component: UserInfo},
            {path: '/user/resetpassword', component: UserResetPassword}
        ]
    }
    // 其他路由...
];

//创建路由
const router = new createRouter({
    history: createWebHashHistory(),
    routes: routes // 使用定义的路由数组
    // 其他选项，如mode: 'history'
});

export default router;

3.在main.js中导入路由

import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router/index.js'---------------------------->导入路由
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)--------------------------------------------------->配置路由
app.mount('#app')

4.路由的使用---->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>

5.实现页面的跳转

import {useRouter} from 'vue-router'---------------------------------------->导入useRounter方法
const router = useRouter();
//登入函数调用
const login = async function () {
  let result = await userLoginService(registerData.value);
  //是否记住密码
  if (!jzmi.value) {
    clearPassword();
  }
  if (result.code == 0) {
    router.push('/');---------------------------------------------------->push方法转向目标页面
    open1();
  } else {
    open4();
  }
}