精华内容
下载资源
问答
  • jeecgboot:设置为缓存路由,切换页面,保留数据
    2021-12-10 15:53:32

    在A页面输入数据后,切换到B页面,再回到A页面的时候,刚才输入的数据就丢失了,十分不方便。

    解决方案:

    在该页面对应的菜单管理里面,设置为缓存路由,切换页面后数据就不会丢失了。

    最终效果:

    很多网友反应三级菜单设置缓存无效,我试了一下,需要将该三级菜单的一级和二级也设置为缓存路由,就可以了。

    更多相关内容
  • 主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue缓存路由组件

    千次阅读 2022-03-29 13:51:01
    输入内容后切到message组件,再切回来,输入框中的内容不存在(因为切换路由时,组件会进行销毁) News的内容在Home中展示 include后面的引号里面是组件的名称,要和name相对应 ...

    使用场景描述:

    news组件中有输入框,输入内容

    输入内容后切到message组件,再切回来,输入框中的内容不存在(因为切换路由时,组件会进行销毁)

    News的内容在Home中展示

     

     

    【注:如果要缓存多个组件的话

            <keep-alive :include="['News','Message']">

                    <router-view></router-view>

            </keep-alive>

    】 

     include后面的引号里面是组件的名称,要和name相对应

    展开全文
  • 主要介绍了vue路由缓存的几种实现方式,结合实例形式详细分析了vue.js路由缓存常见实现方式、使用技巧与操作注意事项,需要的朋友可以参考下
  • 主要介绍了Vue动态路由缓存不相互影响的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • }, 子组件声明接收 props: ['id', 'name', 'age'] 子组件使用 this.xxx 命名路由 路由配置,需要name属性 { name: "Detail", // 命名路由 path: "detail/:id", component: Detail, } 路由路径 , // 跳转哪个命名路由...

    基础

    前端路由

    用来开发 SPA(单页面应用)

    单页面应用

    • 整个应用只有一个完整页面,页面变化都是在这一个页面更新的
    • 点击链接不会刷新整个页面,会局部更新,也会更新浏览历史(地址)
    • 点击链接也不会发送请求,自己写 ajax 代码发送请求

    前端路由的原理

    • 点击链接不会刷新整个页面 --> 给 a 标签绑定点击事件,阻止其默认行为
    • 会更新浏览历史(地址) --> 调用 history.push(path),就可以更新了
    • 会局部更新 --> 内部会监听浏览历史的变化(history.listen(listener)),一旦发生变化就会遍历路由的所有配置,看当前路径(浏览地址)是否匹配上路由路径(path),匹配上就加载 component

    vue-router 提供组件

    • <router-link> 用来路由链接导航
    • <router-view> 用来显示当前路由组件

    $route$router

    $route

    route用来获取路由参数(params/query)和路径(path)

    $router

    用来编程式导航(push/replace/go/back/forward)
    在这里插入图片描述

    路由传参方式总结

    params参数

    • 路由配置
    {
    	path:"/xxx/:id",  //:id 动态路由匹配,能匹配多个地址
    	component:Xxx
    }
    
    • 跳转路由路径
    <router-link to="/xxx/xxx/1">xxx</router-link>
    
    • 子路由接收 :id的参数
      this.$route.params.id 
    
    // 当 :id 的参数发生变化时,需要使用watch监视属性的变化,来更新数据 
      watch: {
        $route: {
          handler(newVal) {
            const id = +newVal.params.id;
            this.message = this.messages.find((message) => message.id === id);
          },
          // 正常情况下,watch只有值发生变化的时候才会调用
          // 一上来会调用一次
          immediate: true,
        },
      },
    

    query

    • 路由链接设置
    <router-link to="/xxx?brand='rolls'&engine='6.75'"></router-link>
    
    • 子组件的获取
    this.$route.query
    

    props

    • 将原先的params参数和query参数以props方式传递给组件

    • 子组件路由配置

    props(route) {
      return {
        ...route.params,
        ...route.query,
      };
    },    
    
    • 子组件声明接收
    props: ['id', 'name', 'age']
    
    • 子组件使用
    this.xxx
    

    命名路由

    • 路由配置,需要name属性
    {
      name: "Detail", // 命名路由
      path: "detail/:id",
      component: Detail,
    }
    
    • 路由路径
    <router-link
      :to="{
        name: 'Detail', // 跳转哪个命名路由
        params: {
          id: message.id,
        },
        query: {
          name: 'jack',
          age: 18,
        },
      }"
    >xxx</router-link>
    

    相同层级路由传递

    • 传参
    <router-view key="value"></router-view>
    
    • 路由组件声明接收
     props: ['key']
    
    • 路由组件使用
    this.xxx 
    

    最基础使用

    配置

    下载包

    yarn add vue-router
    

    views组件

    • About和Home组件
    <template>
      <h1>About</h1>
    </template>
    
    <script>
    export default {
      name: 'About',
    };
    </script>
    
    <style>
    </style>
    
    

    src下定义router文件夹

    // 因为要安装到Vue上面
    import Vue from "vue";
    import VueRouter from "vue-router";
    
    // 引入组件
    import About from "../views/About/index.vue";
    import Home from "../views/Home/index.vue";
    
    //     安装插件
    //     一旦安装插件,就会给全局注册两个组件:router-link  router-view
    //     还会给原型上添加一个属性
    Vue.use(VueRouter);
    
    const router = new VueRouter({
      // 定义路由的配置
      routes: [
        {
          path: "/about", // 路由路径
          component: About // 路由组件
        },
        {
          path: "/home",
          component: Home
        },
        {
          // 当路径是/时,会切换到/home
          path: "/",
          redirect: "/home" // 重定向
        }
      ]
    });
    
    export default router;
    
    
    

    main.js应用路由

    import Vue from "vue";
    // 引入路由
    import router from "./router/index";
    import App from "./App.vue";
    
    Vue.config.productionTip = false;
    
    new Vue({
      render: h => h(App),
      // 应用路由
      router
    }).$mount("#app");
    
    

    app.vue显示

    • router-link 路由链接导航
      切换地址
    • router-view 显示对应的路由组件
      内部会根据当前的地址,遍历路由中routes配置,找到相应的组件显示
    <template>
      <div class="container">
        <h1>Router Page</h1>
        <div class="row">
          <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked">
              <li>
                <router-link to="/about">About</router-link>
              </li>
              <li>
                <router-link to="/home">Home</router-link>
              </li>
            </ul>
          </div>
          <div class="col-md-8">
            <!-- 显示对应的路由组件 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
    };
    </script>
    
    <style>
    </style>
    
    

    在这里插入图片描述

    嵌套路由

    新建子组件

    在这里插入图片描述

    <template>
      <h2>Message</h2>
    </template>
    
    <script>
    export default {
      name: 'Message',
    };
    </script>
    
    <style>
    </style>
    

    引入组件,配置路由

    import Message from '../views/Home/Message/index.vue'
    import News from '../views/Home/News/index.vue'
    
    {
      path: "/home",
      component: Home,
      // 子路由,即使只有一个值也应该是数组
      children: [
        {
          path: "/home/message",
          component: Message
        },
        {
          // 当路径不是 / 开头,就会已父路由路径补全,也是一种简写
          // 注意,简写一定不要再加 /
          path: "news",
          component: News
        }
      ]
    },
    

    home组件显示

    <template>
      <div>
        <h1>Home</h1>
        <ul class="nav nav-tabs">
          <li>
            <router-link to="/home/message">message</router-link>
          </li>
          <li>
            <router-link to="/home/news">news</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    
    

    在这里插入图片描述

    路由传参

    params参数

    message添加元素

    • 效果图
      在这里插入图片描述
    <template>
      <div>
        <h2>Message</h2>
        <ul>
          <li v-for="item in messageData" :key="item.id">
            <!-- to后面必须跟字符串,:绑定以后字符串才会被当做js去解析 -->
            <router-link :to="`/home/message/detail/${item.id}`">{{
              item.content
            }}</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Message',
      data() {
        return {
          // 定义一个假数据
          messageData: [],
        };
      },
      // 模拟请求数据
      mounted() {
        setTimeout(() => {
          this.messageData = [
            { id: 1, content: 'message01' },
            { id: 2, content: 'message02' },
            { id: 3, content: 'message03' },
          ];
        }, 1000);
      },
    };
    </script>
    
    <style>
    </style>
    
    

    在这里插入图片描述

    创建Deail

    <template>
      <ul>
        <li>id:{{ chilData.id }}</li>
        <li>name:{{ chilData.name }}</li>
        <li>content:{{ chilData.content }}</li>
      </ul>
    </template>
    
    <script>
    export default {
      name: 'Detail',
      data() {
        return {
          baseData: [
            { id: 1, name: 'name111', content: 'content111' },
            { id: 2, name: 'name222', content: 'content222' },
            { id: 3, name: 'name333', content: 'content333' },
          ],
          chilData: {},
        };
      },
      watch: {
        $route: {
          handler(newVal) {
            const id = +newVal.params.id;
            this.chilData = this.baseData.find((item) => item.id === id);
          },
          // 正常情况下,watch只有值发生变化的时候才会调用
          // 一上来会调用一次
          immediate: true,
        },
      },
    };
    </script>
    
    <style>
    </style>
    
    

    动态路由配置

    import Detail from "../views/Home/Message/Detail/index.vue";
    
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "/home/message",
          component: Message,
          children: [
            {
              // 动态路由,能够匹配多个路由,简写,省略 /
              path: "detail/:id",
              component: Detail
            }
          ]
        },
        {
          path: "news",
          component: News
        }
      ]
    },
    

    在这里插入图片描述

    Detail

    • 在其this原型链上有一个$route
      mounted() {
        console.log(this);
      },
    
    <template>
      <div>
        <ul>
          <li>{{ showData.id }}</li>
          <li>{{ showData.brand }}</li>
          <li>{{ showData.color }}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Detail',
      data() {
        return {
          detailData: [
            { id: 1, brand: '劳斯', color: 'green' },
            { id: 2, brand: '宾利', color: 'black' },
            { id: 3, brand: '法拉利', color: 'red' },
          ],
          showData: {},
        };
      },
      //   mounted() {
      //     console.log(this);
      //   },
      watch: {
        // 监视this原型链行的$route
        $route: {
          handler(newRouder) {
            // console.log(newRoder);  见图
            const id = +newRouder.params.id;
            this.showData = this.detailData.find((item) => item.id === id);
          },
          // 正常情况下,watch只有值发生变化的时候才会调用
          // 一上来会调用一次
          immediate: true,
        },
      },
    };
    </script>
    
    <style>
    </style>
    
    

    在这里插入图片描述

    • wantch监视结果
      在这里插入图片描述

    immediate

    正常情况下,watch只有值发生变化的时候才会调用
    增加这个属性一上来会调用一次

    immediate: true,
    

    在这里插入图片描述

    watch监视 属性官方文档
    在这里插入图片描述

    done

    在这里插入图片描述

    query

    路由链接设置

    <template>
      <div>
        <h2>Message</h2>
        <ul>
          <li v-for="item in messageData" :key="item.id">
            <!-- query方法就是在之前基础上增加查询字符串 -->
            <router-link
              :to="`/home/message/detail/${item.id}?brand='rolls'&engine='6.75'`"
              >{{ item.content }}</router-link
            >
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    

    子组件获取

    this.$route.query
    

    在这里插入图片描述

    props

    路由传递

    <!-- 将原先的params参数和query参数以props方式传递给组件 -->
    <router-link
      :to="`/home/message/detail/${item.id}?brand='rolls'&engine='6.75'`"
      >{{ item.content }}</router-link
    >
    

    在这里插入图片描述
    #3# 子组件配置

     {
       path: "detail/:id",
       component: Detail,
       // 增加props方法
       props(routeQuery) {
         // console.log(routeQuery);
         return {
           ...routeQuery.params,
           ...routeQuery.query
         }
       }
     }
    

    子组件声明接收

    
    

    -没有props接收,可以在$attrs上面看到,也可以在组件挂载的时候打印this查看
    在这里插入图片描述

    • props接收了,$attrs就没有了
      watch: {
        $route: {
          handler(newRouder) {
            const id = +newRouder.params.id;
            this.showData = this.detailData.find((item) => item.id === id);
          },
          immediate: true,
        },
      },
      // props接收
      props: ['id', 'brand', 'engine'],
    

    3在这里插入图片描述

    this使用

    this.xxx

    命名路由

    • 路由取个名字

    路由传递

    <template>
      <div>
        <h2>Message</h2>
        <ul>
          <li v-for="item in messageData" :key="item.id">
            <!-- 是个对象,有个name属性,就是要去的组件名称,在路由中配置 -->
            <router-link
              :to="{
                name: 'Detail',
                params: {
                  id: item.id,
                },
                query: {
                  brand: 'rolls',
                  engine: 6.75,
                },
              }"
              >{{ item.content }}</router-link
            >
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    

    路由配置

    {
      path: "/home/message",
      component: Message,
      children: [
        {
          // 名称,和组件名称一样,一定要有
          name: "Detail",
          path: "detail/:id",
          component: Detail,
          props(routeQuery) {
            return {
              ...routeQuery.params,
              ...routeQuery.query
            };
          }
        }
      ]
    },
    

    接收

    • 同上面一样,可以props接收
      在这里插入图片描述

    相同层级组件传递

    • 给相同层级的路由组件一起传递公共参数传参

    传参

    <template>
      <div class="container">
        <h1>Router Page</h1>
        <div class="row">
          <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked">
              <!-- 给相同层级的路由组件一起传递参数 -->
              <li>
                <router-link to="/about">About</router-link>
              </li>
              <li>
                <router-link to="/home">Home</router-link>
              </li>
            </ul>
          </div>
          <div class="col-md-8">
            <!-- 这样去传参,只要显示哪个组件,就给哪个组件传参 -->
            <router-view rolls="royce"></router-view>
          </div>
        </div>
      </div>
    </template>
    

    路由组件声明接收

    <template>
      <h1>About</h1>
    </template>
    
    <script>
    export default {
      name: 'About',
      // 接收公共组件数据
      props: ['rolls'],
    };
    </script>
    
    <style>
    </style>
    
    

    路由组件使用

    • this直接使用即可
      在这里插入图片描述

    命名视图

    命名路由

    缓存路由组件

    组件卸载与加载

    • 一个组件加载,另一个组件会卸载,这样性能不哈
      在这里插入图片描述

    在这里插入图片描述

    路由组件缓存

    在这里插入图片描述

     <!-- app组件,要缓存哪个路由,就要在外面包一个keep-alive -->
     <keep-alive include="Home">
       <router-view rolls="royce"></router-view>
     </keep-alive>
    
    • 缓存了,所以还能看到
      在这里插入图片描述
    • 没缓存,直接看不到
      在这里插入图片描述

    缓存多个 include

    数组也可以

     <keep-alive include="Home,About">
    

    在这里插入图片描述
    在这里插入图片描述

    排除法 exxlude

    <keep-alive exclude="About">
    

    在这里插入图片描述

    max 最多缓存数量

    <keep-alive exclude="About" max="1">
    

    缓存组件问题

    
    <keep-alive exclude="">
       <router-view rolls="royce"></router-view>
    </keep-alive>
    
    // 这两个声明周期函数只针对keep-alive缓存的组件触发
     // 已激活,在显示
      activated() {
        console.log('About activated ');
      },
      // 未激活
      deactivated() {
        console.log('About deactivated');
      },
    
    • 优点:性能好,不会重新发请求
    • 缺点:数据一致是旧的
      == 缓存起来以后不会再走mounted,以前发送请求都在mounted发,但是现在缓存起来了不会再走mounted,不会再请求最新数据,不能保证数据最新的 ==
    <template>
      <h1>About</h1>
    </template>
    
    <script>
    export default {
      name: 'About',
      props: ['rolls'],
      mounted() {
        console.log('about mounted');
      },
      beforeDestroy() {
        console.log('about beforeDestroy');
      },
      // 已激活,在显示
      activated() {
        console.log('About activated ');
      },
      // 未激活
      deactivated() {
        console.log('About deactivated');
      },
    };
    </script>
    
    <style>
    </style>
    

    在这里插入图片描述

    路由跳转

    <router-link to=""

    • 路由链接导航
    • 如果点击链接或者按钮只需要进行路由跳转,
    • 例如:导航链接

    编程式导航

    • 编程式导航
    • 如果点击链接或者按钮需要做一些其他事,再进行路由跳转,例子:登录按钮、修改按钮

    push()

    replace()

    back()

    forward()

    <template>
      <div>
        <h2>Message</h2>
        <ul>
          <li v-for="item in messageData" :key="item.id">
            <!-- 是个对象,有个name属性 -->
            <router-link
              :to="{
                name: 'Detail',
                params: {
                  id: item.id,
                },
                query: {
                  brand: 'rolls',
                  engine: 6.75,
                },
              }"
              >{{ item.content }}</router-link
            >
            <!-- 增加按钮,可以回退 -->
            <button @click="push(item.id)">push</button>
            <!-- 替换,不可以回退 -->
            <button @click="replace(item.id)">replace</button>
          </li>
        </ul>
        <!-- 后退,简写 -->
        <button @click="$router.back()">goBack</button>
        <!-- 前进,简写 -->
        <button @click="$router.forward()">goForward</button>
        <router-view></router-view>
      </div>
    </template>
    
      methods: {
        // 编程式导航
        // 添加
        push(id) {
          // console.log(this);
          this.$router.push(`/home/message/detail/${id}?brand=rolls&engine=675`);
        },
        // 替换
        replace(id) {
          this.$router.replace(`/home/message/detail/${id}?brand=rolls&engine=675`);
        },
      },
    

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • Vue缓存路由(keep-alive)以及新的生命周期

    缓存路由

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

    假设我们有登录,注册两个路由组件。登录组件切换到注册组件,登录组件的生命周期,从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了,之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

    使用方式:在keep-alive里面放入要缓存的组件。

    被keep-alive包裹的所有组件,都还不会销毁以及重新渲染。

    来验证一下:

    App.vue

    <template>
      <div id="app">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    注册组件:生成一个随机数,点击登录的时候,传递参数。

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>注册</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="Regist">注册</el-button>
                <div style="margin-top: 20px">
                    <button @click="toLogin">登录</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name: "Regist",
            data(){
                return {
                    userName:'',
                    pwd:'',
                    id:Math.random()
                }
            },
            methods:{
                Regist(){
    
                },
                toLogin(){
                    this.$router.push({
                        path: '/Login',
                        query:{//传参
                            id:this.id
                        }
                    })
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    登录组件:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){//接收参数,赋值给userName
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    效果图:

    第二次切换:

     

    问题来了,这时候我们会发现,第一次和第二次传递过来的随机数是一样的。

    原因是注册组件也被缓存起来了,并不会重新执行。所以传的随机数是一样的。

    那有什么可以使注册组件不被缓存呢?这就需要用到include以及exclude属性

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • 官方文档:API — Vue.js

    代码:

    <template>
      <div id="app">
        <!--include:匹配的组件会被缓存-->
        <!--注意:include的value值是组件的name值-->
        <!--如果router-view有多个组件都需要被缓存。可以使用数组的形式  :include="['Login','Regist']"  -->
        <!--exclude:匹配的组件都不会被缓存-->
    
        <keep-alive include="Login">
          <router-view/>
        </keep-alive>
    
    
        <!--<router-view/>-->
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    两个新的生命周期钩子

    作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。只适用于keep-alive

    activated :路由组件被激活时触发。(当进入缓存的路由组件时触发)

    deactivated:路由组件失活时触发。(当离开缓存的路由组件时触发)

    使用方法:

    接着上面的代码,我们之缓存了Login组件,Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

    第一次切换:

     

     第二次切换:

     上面的效果图可以看出来,虽然每次传的参数都不一样,但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

    代码:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            },
            // 当缓存组件被激活的时候执行
            activated(){
                this.userName = this.$route.query.id
            },
        }
    </script>
    
    <style scoped>
    
    </style>

    以上就是缓存路由组件的基本使用。

    展开全文
  • 1、路由缓存的时候:tab左右切换页面都会自动刷新,表现形式:工作台Radio选中,然后点DemoTab,再点会工作台,Radio不选中了 <router-view :key="rootkey" style="margin: 5px" /> 2、加上Keep-...
  • 缓存路由组件 1、作用:让不展示的路由组件保持挂载,不被销毁 2、具体编码 //缓存一个路由组件 <keep-alive include="News"> //include里面要写组件名 <router-view></router-view> </...
  • vue路由全面详解(下):路由守卫、缓存路由组件(终于要把路由的常用知识写完啦)
  • 针对在内容中心网络(content centric networking,CCN)中如何合理放置与高效利用应答数据的问题,将集中化控制的思想引入到内容缓存与查找中,提出一种协作缓存路由机制。在缓存决策时,通过兴趣包和数据包携带...
  • Vue-router缓存路由组件

    2021-08-15 15:08:22
    缓存路由组件 作用:让不展示的路由组件保持挂载,不被销毁 <keep-alive include="News"> <router-view></router-view> </keep-alive> 通过<keep-alive> ··· <...
  • 缓存路由的方式

    千次阅读 2019-03-18 21:04:17
    //缓存路径,这个路径是给当前组件激活时用的 cache_path: '/preciousMetalCompanyManage/preciousMetalCompanyManage', //缓存路径数组,这个路径数组是给点击子组件时用的 cache_component_paths: [ '/...
  • 主要介绍了keep-alive不能缓存多层级路由菜单问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 路由的概念 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得非常简单。 通过根据不同的请求路径,切换显示不同组件进行渲染页面。 通过nodeJs下载 Vue和vue-router 注意...
  • Vue缓存路由(keep-alive) include不生效
  • > 一整天搞这个问题,按照官方的配置keep-vlive也不生效。 > 百度了很多资料都是说,路由加上name与组件的name对应上就行。然后开启keep-vlive为true。如图。
  • 只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 主要用于保留组件状态或避免重新渲染。 <!-- 基本 --> <keep-...
  • 提出了一种在缓存路径信息时增加优先级属性值的方法,对一次路由发现过程中得到的多条路由的可 靠性进行区分,并把这种方法扩展到整个 DSR协议的路由存储机制中,使节点可以在发送数据分组和对路由 请求进行回复时按照...
  • 基于react-router的中国习惯版,包含:集中配置路由、缓存路由、移动端路由,路由之间可无缝切换,极简配置。(赠人玫瑰手有余香,辛苦码字,留个星呗) 文档 用法 安装 npm i react-router-pro 使用 import {...
  • react-keepalive-router缓存路由

    千次阅读 2020-12-09 00:26:47
    采用react hooks全新api,支持缓存路由,手动解除缓存,增加了缓存的状态周期,监听函数等。 后续版本会完善其他功能。 demo 缓存组件 + 监听 二 快速上手 下载 npm install react-keepalive-router --save # or yarn...
  • 1.router-link的replace属性 ...3.缓存路由组件 *作用:让不展示的路由组件保持挂载,不被销毁 <keep-alive include='组件的名字'> <router-view></router-view> </keep-alive> ...
  • 1.2 如果可以缓存路由组件对象, 可以提高用户体验 2. 编码实现 <keep-alive> <router-view></router-view> </keep-alive> keep-alive控制router-view下的所有路由组件 浏览器显示 ...
  • vue中keep-alive缓存路由/组件

    千次阅读 2019-08-26 13:49:22
    keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似,keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 <keep-alive include="test-keep-alive">...
  • 路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证...
  • 一 ,缓存全部路由 在router-view外包裹keep-alive 例: <keep-alive> <router-view></router-view> </keep-alive> 二 ,指定路由缓存 使用 include <keep-alive include="该路由的...
  • 移动端中,我们浏览商品列表的时候,点击进入详情页面,然后返回到商品列表...包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们 keep-alive在vue2和vue3中还是有些区别的 在vue2中 <keep-alive> &.
  • 采用react hooks全新api ,支持缓存路由,手动解除缓存,增加了缓存的状态周期,监听函数等。 后续版本会完善其他功能。 演示 缓存组件+监听 二快速上手 下载 npm install react-keepalive-router --save # or yarn ...
  • 今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue3实现路由缓存

    2022-05-10 21:25:59
    vue3实现路由缓存

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 184,758
精华内容 73,903
关键字:

缓存路由