vue学习

最新推荐文章于 2026-05-12 00:00:00 发布

原创

最新推荐文章于 2026-05-12 00:00:00 发布 · 2.2k 阅读

标签

#vue.js #前端

vue学习

1、v-if和v-show区别

v-if按照条件是否渲染，v-show是通过display的属性值block或none 控制的
比较：v-if完整的销毁和重新创建，v-show通过css切换
使用场景：频繁切换使用v-show，运行时较少改变用v-if

2、route和router的区别

router是用来操作路由的，route是用来获取路由信息
router是VueRouter的一个实例，包含所有的路由，包括路由的跳转方法，钩子函数
route是一个跳转的路由对象，每个路由都会有一个route对象，是一个局部的对象。

$router的用法

//常规方法
this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({
   
    path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({
   
    path:"/login",query:{
   
   username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({
   
    name:'user',params: {
   
   id:123} });

$route的用法

主要的属性有：
this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews
this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面
this.$route.router 路由规则所属的路由器
this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

3、keep-alive实现原理

定义：是Vue中内置的一个抽象组件，它本身不会渲染一个DOM元素，也不会出现在父组件链中，当它包裹的动态组件时，会缓存不活动的组件实例，而不是销毁它们
用法
路由表中定义属性keepAlive: true

{
   
   
      path: "/index",
      name: 'index',   
      component: () => import(/* webpackChunkName: "index" */ '@/pages/index'),
      meta: {
   
   
        title: '首页', 
        keepAlive: true
      },
    },

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>

组件可以接收三个属性:

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is

最低0.47元/天解锁文章