vue笔记

原创已于 2024-01-01 12:46:16 修改 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #笔记 #javascript

于 2023-11-09 10:22:27 首次发布

本文详细介绍了Vue中的$router.push和$router.replace方法的区别，以及localStorage和sessionStorage的使用，包括如何存储和获取数据，以及如何在组件中显示加载中状态和使用Dialog对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.this.$router.push 和this.$router.replace

this.$router.push

跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面。
声明式：< router-link :to = “…” >
编程式：< router.push(…) > // 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

this.$router.replace
跳转到指定的URL，替换history栈中最后一个记录，点击后退会返回至上一个页面。（A----->B----->C 结果B被C替换 A----->C）
设置replace属性（默认值：false）的话，当点击时，会调用router.replace()，而不是router.push()，于是导航后不会留下history记录。即使点击返回按钮也不会回到这个页面。加上replace: true时，它不会向 history 添加新纪录，而是跟它的方法名一样——替换当前的history记录。

// 字符串
this.$router.push('/index') 
// 对象
this.$router.push({path:'/index'})
// 带查询参数，变成/backend/order?selected=2/，query传参
this.$router.push({path:'/index', query:{name: '123'} })
// 命名的路由 params传参
this.$router.push({name:'index', params:{name: '123'} })

拿值：
  let name= this.$route.query.name//获取路由传递过来的name


// 声明式
<reouter-link :to="..." replace></router-link>
// 编程式：
router.replace(...)
// push方法也可以传replace
this.$router.push({path: '/homo', replace: true})

2 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage: 只要不手动删除，数据就会一直存在

注意：

VUE如果直接使用window.sessionStorage.setItem和window.sessionStorage.getItem来进行存取对象的话，不能正常使用该对象，并且在Application的Session Storage中会显示[object object]。

解决方法：转换为json格式进行存取

存，使用JSON.stringify：

 window.sessionStorage.setItem("user", JSON.stringify(res.data));
window.sessionStorage.setItem("identity", JSON.stringify(this.form.identity));

保存数据语法：
sessionStorage.setItem("key", "value");
读取数据语法：
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法：
sessionStorage.removeItem("key");
删除所有数据：
sessionStorage.clear();```

3卡片阴影

<el-card shadow="always"> 总是显示 </el-card>

4.Breadcrumb 面包屑

<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-ite
<el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
<el-breadcrumb-item>房间信息</el-breadcrumb-item>
</el-breadcrumb>

5加载中

v-loading="loading" loading: true

<script>
  export default {
    data() {
      return {
        loading: true
      };
    }
  };
</script>

6Tabs 标签页

 <el-dialog title="宿舍详情" :visible.sync="dormitoryDialog.visible" width="70%">
   <el-tabs type="border-card" v-model="dormitoryDialog.activeName">
     <el-tab-pane label="宿舍信息" name="1">
       <div class="dormitory-detail-content dormitory-detail-content1">
         <div>门牌号：{{ dormitoryDialog.detailInfo.dormRoomId }}</div>
         <div>
           楼栋信息：{{ dormitoryDialog.detailInfo.dormBuildName }}-{{ dormitoryDialog.det
             dormitoryDialog.detailInfo.unitNo }}单元-{{ dormitoryDialog.detailInfo.floorN
         </div>
         <div class="people-used">
           <el-row class="people-icon-list">
             <i class="el-icon-s-custom" v-for="item in dormitoryDialog.detailInfo.maxCapa
           </el-row>
           <span>{{ dormitoryDialog.detailInfo.currentCapacity }}/{{ dormitoryDialog.detai
         </div>
         <div class="tag-list" v-if="dormitoryDialog.detailInfo.tag">
           <el-tag effect="plain" v-for="item in dormitoryDialog.detailInfo.tag.split(',')
           }}</el-tag>
         </div>
       </div>
     </el-tab-pane>
     <el-tab-pane label="固定资产" name="2">
       <div class="dormitory-detail-content">
         <el-row style="margin-bottom: 10px;">
           <el-button type="primary">添加设备</el-button>
         </el-row>
         <div class="table-content" style="height:calc(100% - 42px)">
           <el-table ref="detailTableRef2" v-loading="!dormitoryDialog.tableDataRequested1
             element-loading-text="拼命加载中..." :border="true" highlight-current-row :da
             height="100%">
             <el-table-column v-for="item in dormitoryDialog.tableHeader1" :key="item.valu
               :label="item.label" :min-width="item.minWidth" align="center">
               <template v-slot="{ row, column }">
                 <div v-if="column.property === 'operate'">
                   <el-row>
                     <el-button type="primary" icon="el-icon-delete" @click="deleteData(ro
                   </el-row>
                 </div>
                 <span v-else>{{ row[column.property] }}</span>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </el-tab-pane>
     <el-tab-pane label="在住员工" name="3">
       <div class="dormitory-detail-content">
         <div class="table-content" style="height:100%">
           <el-table ref="detailTableRef3" v-loading="!dormitoryDialog.tableDataRequested2
             element-loading-text="拼命加载中..." :border="true" highlight-current-row :da
             height="100%">
             <el-table-column v-for="item in dormitoryDialog.tableHeader2" :key="item.valu
               :label="item.label" :min-width="item.minWidth" align="center">
             </el-table-column>
           </el-table>
         </div>
       </div>
     </el-tab-pane>
     <el-tab-pane label="历史员工" name="4">
       <div class="dormitory-detail-content">
         <div class="table-content" style="height:100%">
           <el-table ref="detailTableRef4" v-loading="!dormitoryDialog.tableDataRequested3
             element-loading-text="拼命加载中..." :border="true" highlight-current-row :da
             height="100%">
             <el-table-column v-for="item in dormitoryDialog.tableHeader3" :key="item.valu
               :label="item.label" :min-width="item.minWidth" align="center">
             </el-table-column>
           </el-table>
         </div>
       </div>
     </el-tab-pane>
     <el-tab-pane label="维修记录" name="5">
       <div class="dormitory-detail-content">
         <div class="table-content" style="height:100%">
           <el-table ref="detailTableRef5" v-loading="!dormitoryDialog.tableDataRequested4
             element-loading-text="拼命加载中..." :border="true" highlight-current-row :da
             height="100%">
             <el-table-column v-for="item in dormitoryDialog.tableHeader4" :key="item.valu
               :label="item.label" :min-width="item.minWidth" align="center">
               <template v-slot="{ row, column }">
                 <div v-if="column.property === 'operate'">
                   <el-row>
                     <el-button type="primary" icon="el-icon-delete" @click="deleteData(ro
                   </el-row>
                 </div>
                 <span v-else>{{ row[column.property] }}</span>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </el-tab-pane>
   </el-tabs>
 </el-dialog>

Dialog 对话框

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog>