springBoot整合mybatis第四篇：前端使用Vue实现界面展示

最新推荐文章于 2024-10-14 21:14:58 发布

林夕令

最新推荐文章于 2024-10-14 21:14:58 发布

阅读量756

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/weixin_42231208/article/details/107165854

版权

目标：浏览器输入http://localhost/#/tool/quota，展示以下界面并实现功能（以实现查询额度功能为例，接口类型get）

在这里插入图片描述

前端代码：

#vue代码   index.js
import Vue from 'vue'
import Router from 'vue-router'
import elaside from '@/components/Elaside'
#测试页面路由
import QuotaTest from '@/components/main/product_testing/efficiency_tools/QuotaTest'
Vue.use(Router)

const router = new Router({
   
  routes: [
    {
   
 path: '/',
      component: elaside,
      meta: {
    title: '测试平台' },
      children: [
        {
   
          path: '/tool/quota',  //这就是浏览器里输入的url
          meta: {
    title: '操作额度' },
          component: QuotaTest
        }       ]
    }
        ]
                            })
router.beforeEach((to, from, next) => {
   
  if (to.meta.title) {
   
    document.title = to.meta.title
  } else {
   
    document.title = '测试平台'
  }
  next()
})

export default router