【vue】 vue-antd-admin router使用

最新推荐文章于 2024-08-08 08:30:00 发布

Joise.

最新推荐文章于 2024-08-08 08:30:00 发布

阅读量638

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Joise_/article/details/125603210

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

vue-antd-admin router使用

src/pages 中制作页面 i18n.js国际化 index.js export default 向外暴露的成员，必须严格按照导出时候的名称，来使用{ }按需接收
src/router/async/router.map.js 路由组件注册（login、root不变，折叠）import导入

src/route/config.js 路由配置截取其中一段分析

{
  path: '/', //根
  name: '首页',
  component: TabsView,
  redirect: '/login',
  children: [//根下的孩子
    {
      path: 'dashboard',
      name: 'Dashboard',
      meta: {
        icon: 'dashboard'
      },
      component: BlankView,//空白页 显示在空白页
      children: [
        {
          path: 'workplace',
          name: '工作台',
//meta的定义：简单来说就是路由元信息，也就是每个路由身上携带的信息。
//meta的作用：vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可
          meta: 
            page: {
              closable: false
            }
          },
          component: () => import('@/pages/dashboard/workplace'),
        },
        {
          path: 'analysis',
          name: '分析页',
          component: () => import('@/pages/dashboard/analysis'),
        }
      ]
    },

创建pages

为了区分vue-ant-admin模板页面，文件命名采用首字母大写。

菜品管理优惠管理评价管理数据分析账本管理库存管理订单管理员工管理餐桌管理

在这里插入图片描述

src/router/async/router.map.js 路由组件注册

const routerMap = {
  home:{
    name: '首页',
    component: () => import('@/pages/Home/home')
  },
  dish:{
    name:'菜品管理',
    component: () => import('@/pages/Dish_mg/dish')
  }
}
export default routerMap

src/route/config.js 路由配置

const options = {
routes: [
    {
      path: '/login',
      name: '登录页',
      component: () => import('@/pages/login')
    },
     {
      path: '/',
      name: '首页',
      component: TabsView,
      redirect: '/login',
      children: [
          ==============
          {
          name:'首页',
          path:'home',
          component: () => import('@/pages/Home/home')
        }
          ===============
      ]
   },
]
}

登录跳转到首页

src/pages/login/login.vue 修改Javascript标签中的afterLogin(res)函数

afterLogin(res) {
  this.logging = false
  const loginRes = res.data
  if (loginRes.code >= 0) {
    const {user, permissions, roles} = loginRes.data
    this.setUser(user)
    this.setPermissions(permissions)
    this.setRoles(roles)
    setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
    // 获取路由配置
    getRoutesConfig().then(result => {
      const routesConfig = result.data.data
      loadRoutes(routesConfig)
        ========
      this.$router.push('/home')
        ========
      this.$message.success(loginRes.message, 3)
    })
  } else {
    this.error = loginRes.message
  }
}