精华内容
下载资源
问答
  • 前言:vue-router的切换不同于传统的...一、问题呈现在路由进行切换结果这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新二、解决方案①给增加一个不同:key值,这样vue就会识别这是不同的了...

    前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。

    一、问题呈现

    在路由中进行切换结果

    这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新

    二、解决方案①

    给增加一个不同:key值,这样vue就会识别这是不同的了。

    在路由中进行切换结果

    这时候路由就会更新了。不过这也就意味着需要把每个都绑定一个key值。如果我从page1跳到page2不同组件的话,我其实是不用担心组件更新问题的。

    三、解决方案②

    给增加一个不同v-if值,来先摧毁,然后再重新创建起到刷新页面的效果。

    ①因为router-link组件有取消点击事件,这里的.native就是为了触发组件原生标签中的事件。

    ②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 触发后再执行 this.routerAlive = true; 从而起到摧毁再创建的效果。

    四、解决方案②的延伸,在路由内部触发路由的刷新。

    方案①,方案②都是通过路由的外部来更新路由的,那如果想从路由内部来更新路由呢?

    • freddy
    • nick
    • mike

    export default{

    data(){

    return {

    routerAlive:true

    }

    },

    provide(){ //在父组件中创建属性

    return {

    routerRefresh: this.routerRefresh

    }

    },

    methods:{

    routerRefresh(){

    this.routerAlive = false;

    this.$nextTick(()=>{

    this.routerAlive = true;

    });

    }

    }

    }

    名字:

    跳转到nick,不刷新路由

    跳转到nick,并刷新路由

    跳转到本身,不刷新路由

    刷新本身

    export default {

    name:'page1',

    inject:['routerRefresh'], //在子组件中注入在父组件中出创建的属性

    mounted(){

    this.value = this.$route.params.name;

    },

    data(){

    return {

    value:''

    }

    },

    methods:{

    linkToNick1(){

    this.$router.push('/page1/nick');

    },

    linkToSelf1(){

    this.$router.push('/page1/freddy');

    },

    linkToNick2(){

    this.$router.push('/page1/nick');

    this.routerRefresh();

    },

    linkToSelf2(){

    this.routerRefresh();

    }

    }

    }

    button { margin-top:10px;}

    button:hover { background:#ff9500; }

    ①、当我们点击"跳转到nick,不刷新路由" 时,会发现input的value值并没有改变。

    ②、当我们点击"跳转到nick,并刷新路由" 时,这时候input的value值就已经改变了。

    ③、当我们在input中输入随便输入些数值,然后点击"跳转到本身,不刷新路由",会发现input里面的内容没有刷新。

    ④、点击刷新本身就能触发刷新路由了,是不是很实用。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  •    使用element-ui的 NavMenu导航,里面的菜单属性里有详细的介绍。 第一步配置属性,并把每一项的index改为想要跳转的path: 第二步在Home页加上< router-view />插槽: 第三步查看路由配置: ...

    先给大家模拟一下场景:

    在这里插入图片描述

    想要的效果:

    在这里插入图片描述

    下面来看需要配置项

       使用element-ui的 NavMenu导航,里面的菜单属性里有详细的介绍。

    第一步配置属性,并把每一项的index改为想要跳转的path:

    在这里插入图片描述
    第二步在Home页加上< router-view />插槽:

    在这里插入图片描述
    第三步查看路由配置(router.js):

    在这里插入图片描述
    注意: 导航栏的index属性的路径一定要和router.js里的路径一致哦。

    展开全文
  • 一,前言 上一篇,实现了根据路由配置动态生成...本篇将对面包屑组件进行完善,实现面包屑与菜单路由的联动及跳转功能 二,实现思路 主要利用$route.matched,获取路由的匹配过程,并在面包屑组件上渲染显示,添加跳转功...

    一,前言

    上一篇,实现了根据路由配置动态生成菜单,目前点击菜单能够实现内容区视图切换显示
    但面包屑组件尚未实现与路由联动和点击跳转的效果
    
    面包屑:主要起到一个导航的功能,可以告诉用户当前在哪里,并且可以实现快速跳转功能
    本篇将对面包屑组件进行完善,实现面包屑与菜单路由的联动及跳转功能
    

    二,实现思路

    主要利用$route.matched,获取路由的匹配过程,并在面包屑组件上渲染显示,添加跳转功能
    

    查看$route.matched:

    以访问订单列表为例:http://localhost:8080/order/orderlist
    orderlist
    匹配情况如下-相关路由配置:

    {
      path: "/",
      component: () =>
      import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"),
      children: [
        // order
        {
          path: "/order",
          name: "order",
          redirect: "/order/orderlist",
          meta: { icon: "ordered-list", title: "订单管理" },
          component: { render: h => h("router-view") },
          children: [
            {
              path: "/order/orderlist",
              name: "orderlist",
              meta: { title: "订单列表" },
              component: () =>
              import(/* webpackChunkName: "order" */ "./views/Order/OrderList")
            }
          ]
        }
      ]
    }
    

    路由的匹配过程:

    $route.matched数组会包含三个对象,
    对象中的path值分别是””,”/order”,”/order/orderlist”
    
    当路由发生变化时,根据$route.matched就可以得到面包屑数据了
    


    二,实现面包屑组件

    修改面包屑组件layout/BreadCrumb.vue

    <template>
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item v-for="(item) in breadList" :key="item.name">
          <router-link
            v-if="item.name != name"
            :to="{ path: item.path === '' ? '/' : item.path }"
          >{{ item.meta.title }}</router-link>
          <span v-else>{{ item.meta.title }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </template>
    
    <script>
    export default {
      data () {
        return {
          name: '',
          breadList: []
        }
      },
      created () {
        this.getBreadcrumb()
      },
      methods: {
        getBreadcrumb () {
          this.name = this.$route.name
          
          this.breadList = []
          this.breadList.push({name: '', path: '/', meta: {title: '首页'}})
          this.$route.matched.forEach(item => {
            if(item.path !== ''){
              this.breadList.push(item)
            }
          })
        }
      },
      watch: {
        $route () {
          this.getBreadcrumb()
        }
      }
    }
    </script>
    
    <style scoped>
    .breadcrumb {
      margin: 16px 0
    }
    </style>
    

    getBreadcrumb方法

    根据this.$route.matched数组中路由匹配过程构建面包屑组件数据this.breadList 
    

    this.breadList数组

    第一条数据(首页)是手工插入的,替换掉了path为空的情况
    

    路由监听:

    使用watch监听路由,当路由发生变化时重新获取面包屑组件数据this.breadList
    

    处理逻辑:

    面包屑视图渲染,以name作为key,除当前路由均添加跳转事件
    同时需要在router配置中对不能选中的菜单设置redirect,
    使其重定向可选中的下一级菜单中的收个路由
    

    三,测试面包屑

    npm run serve启动项目
    
    仪表盘

    dashboard

    在订单审批页面,点击面包屑中订单管理链接进行跳转
    

    link

    多级菜单同理:
    在多级菜单2页面,点击面包屑中多级菜单链接进行跳转时
    

    2lv

    由于多级菜单和多级菜单1均为父菜单,直接重定向到多级菜单1下首个可显示路由
    

    3lv

    四,修改路由配置

    上边虽然已经实现了面包屑功能,但似乎还有更简单的方式:

    面包屑的第一条数据-首页,不使用手动插入方式,
    在路由中对”/“添加meta设置title为首页,面包屑渲染时判断当path为’’时替换为’/‘
    同时遍历this.$route.matched时取消对path=’’的过滤,使代码更简洁
    

    五,结尾

    以上就实现了面包屑组件并实现了面包屑与菜单路由的联动及跳转
    主要实现思路是通过监听路途变化,根据this.$route.matched得到路由匹配过程
    
    vue-framework-admin界面部分差不多了,下一步开始做登录退出功能
    首先需要对完善Header组件,添加头像,昵称,退出登录功能
    然后,制作一个简单的登录页面,登录后保存用户信息到本地localStorge中
    接下来,引入mock,使用mock来模拟登录接口的调用
    再然后,封装Axios,使用Axios访问登录接口API
    再然后,集成Vuex状态管理,将用户信息保存到Vuex中
    ......实现一个后台管理平台框架
    再然后开始添肉,制作表单,表格,查询搜索,数据维护增删改查,仪表盘,权限等功能
    还会再做一些响应式使应用能够尽可能适配移动端
    

    十二,代码下载

    传送门:CSDN下载
    传送门:GitHub下载-vue-framework-admin-v0.0.6


    维护记录:

    20190809:
    编写文章,上传代码资源

    展开全文
  • 一,前言 上一篇,为vue-framework-admin添加了路由配置,实现了点击菜单切换内容显示 ...这就需要对路由配置信息进行递归处理,并跳过不需要显示在菜单中的路由配置项, 另外,菜单的图标,名称也都需要在路由中...

    一,前言

    上一篇,为vue-framework-admin添加了路由配置,实现了点击菜单切换内容显示
    本篇将实现根据路由配置动态生成菜单功能
    
    首先菜单(路由)的层级是不固定的,有可能是1级2级3级或更多
    其次,并不是所有路由都会渲染都菜单上:如登录注册404,订单详情,分布表单等
    
    这就需要对路由配置信息进行递归处理,并跳过不需要显示在菜单中的路由配置项,
    另外,菜单的图标,名称也都需要在路由中进行配置
    

    二,实现思路

    通过递归路由渲染菜单组件,路由配置需做以下约定:

    1,不需要渲染到路由组件中的路由(包含子路由),添加hideInMenu:true
    2,有name属性(且hideInMenu不等于true)的路由才会被渲染到菜单组件上
    3,希望子路由不被渲染到菜单组件上,添加hideChildrenInMenu:true
    4,使用meta元信息,对路由设置菜单图标和title等属性
    

    三,修改路由

    确定了实现的思路,开始按照约定修改路由配置:

    1)登录,注册,404等视图组件,添加hideInMenu:true,使之不在菜单组件进行渲染
    2)仪表盘,订单管理,订单列表,订单审批需要在菜单组件进行渲染,设置name属性,并使用meta元数据添加图标和title属性
    3)订单详情不需要添加到菜单组件,不需要设置name属性和meta元数据
    4)订单审批下的分布表单不在菜单组件进行渲染,且多个表单页面对应同一个菜单项,订单审批路由添加hideChildrenInMenu: true
    
    router.js
    import Vue from "vue";
    import Router from "vue-router";
    import NotFound from "./views/404";
    import NProgress from "nprogress";
    import "nprogress/nprogress.css";
    
    Vue.use(Router);
    
    /**
     * 路由约定:
     *
     * 不需要渲染到路由组件中的路由(包含子路由),添加hideInMenu:true
     * 有name属性(且hideInMenu不等于true)的路由才会被渲染到菜单组件上
     * 希望子路由不被渲染到菜单组件上,添加hideChildrenInMenu:true
     * 使用meta元信息,对路由设置菜单图标和title等属性
     */
    const router = new Router({
      mode: "history",
      base: process.env.BASE_URL,
      routes: [
        {
          path: "/user",
          hideInMenu: true,
          component: () =>
            import(/* webpackChunkName: "layout" */ "./layouts/UserLayout"),
          children: [
            {
              path: "/user",
              redirect: "/user/login"
            },
            {
              path: "/user/login",
              name: "login",
              component: () =>
                import(/* webpackChunkName: "user" */ "./views/User/Login")
            },
            {
              path: "/user/register",
              name: "register",
              component: () =>
                import(/* webpackChunkName: "user" */ "./views/User/Register")
            }
          ]
        },
        {
          path: "/",
          component: () =>
            import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"),
          children: [
            // 默认
            {
              path: "/",
              redirect: "/dashboard"
            },
            // dashboard
            {
              path: "/dashboard",
              name: "dashboard",
              meta: { icon: "dashboard", title: "仪表盘" },
              component: () =>
                import(/* webpackChunkName: "dashboard" */ "./views/Dashboard/Dashboard")
            },
            // order
            {
              path: "/order",
              name: "order",
              meta: { icon: "ordered-list", title: "订单管理" },
              component: { render: h => h("router-view") },
              children: [
                {
                  path: "/order/orderlist",
                  name: "orderlist",
                  meta: { title: "订单列表" },
                  component: () =>
                    import(/* webpackChunkName: "order" */ "./views/Order/OrderList")
                },
                {
                  path: "/order/orderdetails",
                  component: () =>
                    import(/* webpackChunkName: "order" */ "./views/Order/OrderDetails")
                },
                {
                  path: "/order/approval",
                  name: "approval",
                  meta: { title: "订单审批" },
                  hideChildrenInMenu: true,
                  component: () =>
                    import(/* webpackChunkName: "order" */ "./views/Order/Approval"),
                  children: [
                    {
                      path: "/order/approval",
                      redirect: "/order/approval/info"
                    },
                    {
                      path: "/order/approval/info",
                      name: "info",
                      component: () =>
                        import(/* webpackChunkName: "order" */ "./views/Order/Approval/ApprovalStep1")
                    },
                    {
                      path: "/order/approval/confirm",
                      name: "confirm",
                      component: () =>
                        import(/* webpackChunkName: "order" */ "./views/Order/Approval/ApprovalStep2")
                    },
                    {
                      path: "/order/approval/result",
                      name: "result",
                      component: () =>
                        import(/* webpackChunkName: "order" */ "./views/Order/Approval/ApprovalStep3")
                    }
                  ]
                }
              ]
            },
            // test
            {
              path: "/multiple",
              name: "multiple",
              meta: { icon: "form", title: "多级菜单" },
              component: () =>
                import(/* webpackChunkName: "multiple" */ "./views/Order/Approval"),
              children: [
                {
                  path: "/order/approval/info",
                  name: "info",
                  meta: { title: "多级菜单1" },
                  component: () =>
                    import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep1"),
                  children: [
                    {
                      path: "/order/approval/result",
                      name: "result",
                      meta: { title: "多级菜单1-1" },
                      component: () =>
                        import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep3")
                    }
                  ]
                },
                {
                  path: "/order/approval/confirm",
                  name: "confirm",
                  meta: { title: "多级菜单2" },
                  component: () =>
                    import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep2")
                }
              ]
            }
          ]
        },
        {
          path: "*",
          name: "404",
          hideInMenu: true,
          component: NotFound
        }
      ]
    });
    
    router.beforeEach((to, from, next) => {
      if (to.path !== from.path) {
        NProgress.start();
      }
      next();
    });
    
    router.afterEach(() => {
      NProgress.done();
    });
    
    export default router;
    
    

    按照设计的约定对路由配置修改完成,下一步为菜单组件添加对应的逻辑


    四,为菜单组件添加根据路由配置构建菜单数据方法

    修改菜单组件SiderMenu.vue:,添加根据路由配置构建菜单数据方法

    /**
     * 根据路由配置构建菜单数据
     */
    buildMenuDataByRouter(routes = [], parentKeys = [], selectedKey) {
      const menuData = [];
      routes.forEach(item => {
        // 有name 且不隐藏 : 需要渲染到菜单组件上
        if (item.name && !item.hideInMenu) {
          // 保存openKeysMap和selectedKeysMap(path作为selectedKey)
          this.openKeysMap[item.path] = parentKeys;
          this.selectedKeysMap[item.path] = [selectedKey || item.path];
          // 解构并删除children,只保留当前层级
          const newItem = { ...item };
          delete newItem.children;
          // 如果有children且不隐藏 : 需要渲染到菜单组件上
          if (item.children && !item.hideChildrenInMenu) {
            // 对当前children递归并加入到结构后的children上
            newItem.children = this.buildMenuDataByRouter(item.children, [
              ...parentKeys,
              item.path
            ]);
          } else {
            this.buildMenuDataByRouter(
              item.children,
              selectedKey ? parentKeys : [...parentKeys, item.path],
              selectedKey || item.path
            );
          }
          menuData.push(newItem);
          // 没有name,但不隐藏本层及Children,并且有children -- 本层不显示,但子路由可显示
        } else if (
          !item.hideInMenu &&
          !item.hideChildrenInMenu &&
          item.children
        ) {
          menuData.push(
            ...this.buildMenuDataByRouter(item.children, [
              ...parentKeys,
              item.path
            ])
          );
        }
      });
      return menuData;
    }
    
    方法通过递归router配置,按照约定逻辑对数据进行处理,最终得到菜单数据menuData
    

    五,完善菜单组件视图模板

    根据路由配置构建菜单组件需要的数据后,需要为菜单组件编写对应的菜单渲染模板
    
    由于每层菜单都可能存在children子菜单,同时也可能是最后一层
    所以SiderMenu.vue菜单组件只负责处理一级菜单
    如果一级菜单包含children数组对象,则将对children数组进行递归处理
    
    子菜单数据children,将交由Ant Design Vue组件库提供的单文件递归组件处理
    (https://vue.ant.design/components/menu-cn/#components-menu-demo-single-file-recursive-menu)
    

    修改Sidermenu.vue:

    <template>
      <div style="width: 256px">
        <a-menu
          :selectedKeys="selectedKeys"
          :openKeys.sync="openKeys"
          theme="dark"
          mode="inline"
        >
          <template v-for="item in menuData">
            <!-- 没有children的菜单(一级菜单) -->
            <a-menu-item
              v-if="!item.children"
              :key="item.path"
              @click="() => $router.push({ path: item.path, query: $route.query })"
            >
              <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
              <span>{{ item.meta.title }}</span>
            </a-menu-item>
            <!-- 有children的菜单  -->
            <sub-menu v-else :menu-info="item" :key="item.path" />
          </template>
        </a-menu>
      </div>
    </template>
    

    SiderMenu.vue组件:

    SiderMenu.vue菜单组件对根据路由配置生成的菜单数据menuData进行递归处理
    使用a-menu-item标签,只处理没有children数组对象的一级菜单
    若存在children对象,直接交由SubMenu组件进行处理
    

    六,添加单文件递归菜单组件

    Ant Design Vue组件库提供了单文件递归菜单组件

    https://vue.ant.design/components/menu-cn/#components-menu-demo-single-file-recursive-menu
    

    添加单文件递归菜单组件:layouts/SubMenu.vue

    <template functional>
      <a-sub-menu :key="props.menuInfo.path">
        <span slot="title">
          <a-icon
            v-if="props.menuInfo.meta.icon"
            :type="props.menuInfo.meta.icon"
          />
          <span>{{ props.menuInfo.meta.title }}</span>
        </span>
    	<!-- 遍历子菜单数据 -->
        <template v-for="item in props.menuInfo.children">
          <!-- 最后一层 -->
          <a-menu-item
            v-if="!item.children"
            :key="item.path"
            @click="
              () =>
                parent.$router.push({ path: item.path, query: parent.$route.query })
            "
          >
            <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </a-menu-item>
          <!-- 还有children,继续遍历 -->
          <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>
      </a-sub-menu>
    </template>
    <script>
    export default {
      props: ["menuInfo"]
    };
    </script>
    

    SubMenu.vue组件:

    菜单数据首先将通过siderMenu菜单组件对一级菜单进行处理
    如果一级菜单包含children对象,则转交给SubMenu组件进行处理
    所以进入SubMenu组件处理的数据,当前层级都必定包含children对象
    
    SubMenu组件需要先对当前层做处理,再遍历子菜单数据children对象,
    如果子菜单数据Item仍有children对象,则继续由SubMenu组件递归处理
    直到递归终止条件:菜单数据Item到了最后一层,不再包含children数组对象
    
    一级菜单使用a-sub-menu标签,二级菜单使用a-menu-item标签
    

    七,测试菜单生成

    npm run serve 查看菜单生成:
    menu
    Menu1

    Menu2

    八,测试多级菜单

    由于菜单的层级是不确定的,可能是一级二级三级或更多层
    当前根据路由配置动态生成菜单的功能能够支持多层级
    

    修改路由,添加多级菜单配置:

    新增"多级菜单"菜单项,并添加children:多级菜单1,多级菜单1-1,多级菜单2
    
    // test
    {
      path: "/multiple",
      name: "multiple",
      meta: { icon: "form", title: "多级菜单" },
      component: () =>
      import(/* webpackChunkName: "multiple" */ "./views/Order/Approval"),
      children: [
    	{
    	  path: "/order/approval/info",
    	  name: "info",
    	  meta: { title: "多级菜单1" },
    	  component: () =>
    	    import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep1"),
    	  children: [
    	    {
    	      path: "/order/approval/result",
    		  name: "result",
    		  meta: { title: "多级菜单1-1" },
    		  component: () =>
    		    import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep3")
    	    }
          ]
        },
        {
          path: "/order/approval/confirm",
          name: "confirm",
          meta: { title: "多级菜单2" },
          component: () =>
            import(/* webpackChunkName: "multiple" */ "./views/Order/Approval/ApprovalStep2")
        }
       ]
     }
    

    测试多级菜单:

    MutilMenu

    九,修改跳转

    由于约定路由依靠name属性判断是否加入到菜单中,
    订单详情页不需要加入菜单,所以不能使用name属性
    
    因此订单列表页跳转详情页时,不能使用$router.push({ name: xxx })进行跳转
    需要修改为$router.push({ path: xxx }),使用path跳转
    
    <template>
      <div>
        订单列表
        <a-button
        type="primary"
        @click="
        () => $router.push({ path: '/order/orderdetails', query: { orderId: '1' } })
    ">
    	查看详情</a-button>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style></style>
    
    

    十,Menu中的属性

    Menu 导航菜单文档:
    https://vue.ant.design/components/menu-cn/

    菜单选中Key和打开Key都会和路由的值相关

    SelectedKeys
    defaultSelectedKeys
    defaultOpenKeys
    

    defaultXXX:

    在组件实例化时只有第一次时生效,加载完成后修改无效,defaultXXX值不会被改变
    
    这个API的设计使用了react中受控组件和非受控组件的概念
    不需要再为初始化状态声明并绑定变量,使用起来更加方便
    

    路由变化时,打印selectKeys和openKeys对象

    keys


    十一,结尾

    本篇实现了根据路由配置动态生成菜单功能
    首先针对路由的各种情况进行了一个约定
    并且根据这个约定为菜单组价添加了生成菜单数据的方法
    使用单文件菜单组件对菜单数据进行递归,动态渲染菜单项
    

    十二,代码下载

    传送门:CSDN下载
    传送门:GitHub下载-vue-framework-admin-v0.0.5


    维护记录:

    20190808:
    编写文章,上传代码资源
    20190809:
    添加CSDN下载链接
    完善多级路由部分的描述

    展开全文
  • 进行组件切换的页面中,上面菜单导航,不能跳转,找了半天,不知道为什么会出现这个原因 最终原因:因为同事将我代码中的路由守卫函数中,的跳转逻辑注释了,不是不能点击切换,而是点击切换后,不跳转路径 ...
  • 一,前言 上一篇,添加了vue-framework-admin后台管理页面的布局 在后台管理的布局中,当左侧菜单被...设置路由,使内容显示区域根据选中菜单进行切换 内容部分由<Content /> 改为<router-view>,并删除Co...
  • 不过这种实现方法具有一定的缺点,即每次路由切换时都会进行路由拦截的判断。 动态添加路由,通过后端返回的菜单,为用户动态添加具有权限的路由。这种只会在系统初始化和页面刷新时调用。 一、beforeEach路由...
  • 项目中的菜单是由后台动态传来的,通过ID来进行路由的跳转的, 但是发现通过(this.$route.query.id)获取 ID 进行判断页面时,有时获取到的是字符串、有时候是数字, 原因: 字符串:当已经处在某个有ID的路由...
  • Vue刷新/重载当前路由获取数据 Vue如何刷新或重载当前路由来更新数据? Vue如何监听同一路由加载事件? 方案:可以利用路由的quey参数,使用watch进行检测router的变化实现...切换仓库,左侧的菜单不变,都是...
  • App.vue是我们的主组件,所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件。 也就是说App.vue中的就是主菜单,项目要求是点击主菜单的某一项时显示出的页面也含菜单且右侧内容根据左侧菜单...
  • 当前开发的ERP系统中,录入单据时有时需要切换到其它的菜单进行查询资料,切换回到原有菜单时需要保留原有的数据 问题描述: 当前来回切换菜单时,界面数据重新刷新,业务人员需要重新输入数据,造成繁琐 原因...
  • el-menu 有个属性:default-active="curActive" el-menu-item 有个属性 :index=“home” 这2个属性值对上号就自动定位了 ...可以在左侧菜单栏组件里对路由进行监控,就算切换tagview也会自动定位 watc...
  • 我们可以在base组件中编写导航菜单,通过handleSelect(val,path)实现动态的切换路由, 通过 this.$router.push添加跳转路由,我们可以在指定跳转路由前面进行获取需要改变的背景图片,然后传递给其他组...
  • 左边点击导航栏进行导航时,路由切换到对应的页面,这里需要使用 <router-link> <router-link>组件可以支持在具有路由功能的应用中 (点击) 导航, 通过to属性指定目标地址,默认渲染成带有正确链接的<...
  • 在项目中有这样的场景,一个菜单进去表格loading状态发送请求 此时请求处于pending状态 找个时候我们切换菜单,另一条请求也发出去了,找个时候之前的请求也完成了,就会出现你在另一个页面数据对不上 或者上条请求...
  • 在项目中有这样的场景,一个菜单进去表格loading状态发送请求 此时请求处于pending状态 找个时候我们切换菜单,另一条请求也发出去了,找个时候之前的请求也完成了,就会出现你在另一个页面数据对不上 或者上条请求...
  • 跳转到哪个页面对应tab就改变其设置的样式点击secondPage页面的...像这种情况一般会用到ui.router路由模块的一个指令,跳转一般有两种方法,一种是使用指令进行跳转,一种是利用服务进行跳转。指令是ui-sref,这相当...
  • 主要依赖 基于vue@2.0 使用vue-cli@2.0搭建项目框架 使用vue-router@2.1进行页面路由切换 使用vue-resource@1.0.1进行http请求获取数据 mock假数据存储在本地 使用stylus编写样式 使用eslint进行js代码的规范、 使用...
  • VueRouter

    2020-05-18 08:31:45
    路由 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要...前端路由是基于hash值的变化进行实现的(比如点击页面中的菜单或者按钮改变URL的hash值,根据hash值的变化来控制组件的切换) 核心实现依靠一
  • ant design pro 页面加载原理及过程,@connect 装饰器

    万次阅读 多人点赞 2018-08-02 13:27:26
    如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。   二、详述 加载过程图   2.1、菜单路由→组件  在左侧的导航栏点击 列...
  • 如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。 二、详述 加载过程图   2.1、菜单路由→组件  在左侧的导航栏...
  • 如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。   二、详述 加载过程图   2.1、菜单路由→组件  在左侧的导航栏点击 列表页 &...
  • 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录; 登录完成后vue路由跳转到主页,这时候浏览器提示“是否记住密码”,我选“否”; 然后我点菜单跳转到另一个路由,...
  • 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 问题:刷新页面后 丢失激活的样式 原因:default-active="/" 值是死的 做法:获取当前地址栏的路径 设置给default-active ...
  • 底部TabsFooter

    2019-10-03 11:17:55
    Demo简单描述:点击底部菜单切换页面,并且底部为共用。...首先我们需要一个全局变量来方便我们进行Tab的当前页面active判断及页面路由的改变,添加currentActiveTab.js: // 默认为首页 export def...
  • React项目实战(一)

    千次阅读 2020-04-27 19:17:34
    文章目录项目实战前的准备...利用Antd实现组件2-1 使用Antd的Layout进行布局2-2 可以设计个Logo2-3 实现左侧的菜单展示2-4 实现左侧的小图标2-5 实现点击菜单切换总结需要下载的组件 项目实战前的准备工作 React基础...
  • 动态菜单,通过菜单管理统一管理访问路由 数据切换,通过mock配置对接口数据/mock模拟数据进行切换 发布时,可动态配置CDN静态资源/切换新旧版本 演示地址:http://demo.open.renren.io/renren-fast(账号密码...
  • 2020-09-07

    2020-09-07 22:51:04
    前端路由是依靠hash值(锚链接)的变化进行实现(比如点击页面中的菜单或者按钮改变URL的hash值,根据 hash值的变化来控制组件的切换) 根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系 前端...

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

菜单进行路由切换