cdn引入实现vue-router的嵌套路由

最新推荐文章于 2023-12-06 00:15:00 发布

Alvin千里无风

最新推荐文章于 2023-12-06 00:15:00 发布

阅读量941

点赞数

分类专栏：前端文章标签： vue html

本文链接：https://blog.csdn.net/alvinliu2031/article/details/118825773

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

项目背景

目前的项目是基于若依框架的前后不分离的项目开发的后台管理项目，在此基础上进行迭代开发。

尝试：目前按钮权限是采用<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">的方式进行权限控制的，直接用vue-cli构建一个项目部署的话，按钮的权限无法根据后台设置的角色控制，这个不行；

看了一下若依的文档，然后新的页面的是在vue、vue-router、iview、Thymeleaf，在静态HTML中写vue代码。

实现嵌套路由的代码

index.html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:replace="init :: header('待办项目')"></head>

<body>
  <!-- 默认先不显示HTML中的内容，是由于一开始经后端渲染的时候，这个vue还没加载好，会显示没处理的HTML -->
  <div id="app" style="opacity: 0">
    <router-view></router-view>
  </div>
  <!-- 利用thymeleaf引入公共组件，加载vue、vue-router的写在公共的页面中了 -->
  <div th:replace="init :: expand"></div>
  <div th:replace="init :: base"></div>
  <div th:replace="init :: iview"></div>
  <div th:replace="init :: footer"></div>
  <!--    项目基础信息详情组件-->
  <div th:replace="city/projectInfo/components/baseProjectInfo :: baseProjectInfoComponents"></div>
  <div th:replace="city/projectInfo/components/baseProjectInfo :: uploadFilesComponents"></div>
  <!--    项目上传相关组件-->
  <div th:replace="city/projectInfo/components/newItemForm :: newProjectItemFormComponents"></div>
  <!--    历史详情组件-->
  <div th:replace="city/projectInfo/components/projectHistory :: projectHistoryComponents"></div>
  <!--    流程处理的路由页面-->
  <div th:replace="city/projectInfo/components/dealProject :: dealProjectHistoryComponents"></div>
  <div th:replace="city/projectInfo/components/dealProject :: dealProjectInfoComponents"></div>

  <script>
    let routes = [
      { path: '/', name: 'index', },
      { path: '/newProject', name: 'newProject', component: NewProjectItemFormComponent, },
      {
        path: '/projectHistory',
        name: 'projectHistory',
        // 组件的变量是利用thymeleaf定义在其他文件中
        component: ProjectHistoryComponent,
        children: [
          { path: '/projectHistory/bdGroup', name: 'projectHistoryBdGroup', component: BDGroupDealProjectInfo },
          { path: '/projectHistory/index/:projectCode', name: 'projectHistoryIndex', component: DealProjectHistory, }
        ]
      },
    ];
    let router = new VueRouter({
      routes: routes
    })
    let vm = new Vue({
      router,
      el: '#app',
      data() {
        return {}
      },
      created() {
        $('#app').css('opacity', '1');
        this.loading = true
      },
    })
  </script>
</body>

</html>

init.html

公共的组件引用

<div th:fragment="base">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/vue-router.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
</div>
<div th:fragment="iview">
    <link th:href="@{/css/iview.css}" rel="stylesheet" />
    <script th:src="@{/js/iview.min.js}"></script>
</div>

projectHistory.html

<div th:fragment="projectHistoryComponents">
  <style>
  </style>
  <script type="text/x-template" id="projectHistory">
      <tempalte>
          <div class="project-history-wrapper">
            <router-view></router-view>
          </div>
      </tempalte>
  </script>
  <script>
    let ProjectHistoryComponent = Vue.component("ProjectHistory", {
      data() {
        return {
        }
      },
      template: "#projectHistory",
    });
  </script>
</div>

组件属性props定义

以前工程化项目都没有这个问题，直接在HTML写会转成全小写才能注册props，或者按官方的写法

Prop 的大小写 (camelCase vs kebab-case)

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Alvin千里无风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
cdn引入实现vue-router的嵌套路由

项目背景目前的项目是基于若依框架的前后不分离的项目开发的后台管理项目，在此基础上进行迭代开发。尝试：目前按钮权限是采用<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">的方式进行权限控制的，直接用vue-cli构建一个项目部署的话，按钮的权限无法根据后台设置的角色控制，这个不行；看了一下若依的文档，然后新的页面的是在vue、vue-ro
复制链接

扫一扫

专栏目录