网站首页 » 前端开发 » Vue » Vue 百科全书(珍藏版)
上一篇:
下一篇:

Vue 百科全书(珍藏版)

前言

为了让学习更加高效,在实战中更加如鱼得水,整理是在所难免的,所以在这里我把 Vue 的一些常用的知识点,整理收藏成篇,前人种树,后人乘凉。这是一篇关于 Vue 的百科全书。你准备好了吗,我们现在就开始!

路由篇

路由跳转

跳转标签尽可能地使用 <router-link to=”/home”></router-link> 的形式来进行跳转。
这样写我们就可以很方便地只需修改 VueRouter 对象中的 mode 属性的值就可以实现哈希模式和 history 模式之间的切换了。当我们设置mode:”hash” 或者直接删掉这个属性时,我们也不需要在 <router-link to=”/home”></router-link> 标签的to=”/home” 中添加 # 号,Vue 会自动地帮我们添加,但如果,我们用的是 a 标签的话,就需要手动一个一个添加 # 号了。不过在我们的实践开发中用的是 history 模式。但如果想在低版本的浏览器中使用就要用哈希模式。在 history 模式下我们可以使用浏览器的前进后退来切换页面。

router-link 绑定变量 url 的写法

router-link 中 to 绑定的不是字符串 url,而是一个代表字符串 url 的变量,此时要怎么写呢?

<router-link :to="url"></router-link> 

修改 router-link 生成的默认标签

很多时候,router-link 默认生成的 a 标签不是我们想要的,我们想生成自己需要的标签,此时我们可以像下面这样写:

<router-link :to="url" tag="div"></router-link>

往 router-link 中添加元素

修改了 router-link 默认生成的 a 标签后,觉得还满足不了你,那么你还可以往 router-link 里添加内容,就像下面这样:

<router-link :to="url" tag="div">
  <i class="fa fa-home" aria-hidden="true"></i>
  <span>云库网</span>
</router-link>

<!-- 此时就会在浏览器中渲染出 -->
<div>
  <i class="fa fa-home" aria-hidden="true"></i>
  <span>云库网</span>
</div>

router-link 中甚至还可以包含 <a> 标签。router-link 会自动给 <a> 标签添加路由

<router-link :to="url" tag="div">
  <a>云库网</a>
</div>

自定义激活导航

router-link 会默认为当前激活的导航菜单添加一个类名,我们也可以修改它,在路由的配置中添加一个linkActiveClass 属性就可以,比如:

......
let vueRouter = new VueRouter({
  mode:'history',
  linkActiveClass:'active',
  ......
})

不过这样写是全局起作用的。你还可以为每个导航菜单定义自己的样式:

<router-link :to="/home" active-class="homeClass">首页</router-link>
<router-link :to="/about" active-class="aboutClass">关于</router-link>

router-link 激活状态的精确匹配

如果链接中的路由中有包含于地址栏的 url ,那么router-link 的默认的全局匹配就会把全部包含于地址栏 url 的字符串的路由导航菜单都激活,比如:

<router-link :to="/" active-class="homeClass">首页</router-link>
<router-link :to="/home" active-class="aboutClass">关于</router-link>

当你点击了关于的时候,两个导航菜单都被激活了,此时我们可以用一个 exact 属性来实现精确匹配属性。

<router-link exact></router-link>

router-link 事件

router-link 默认是点击跳转的,但很多时候我们却希望当鼠标放到上面去时就切换了,也很简单,你可以像下面这样修改

<router-link :to="/home" event="mouseover">首页</router-link>
<router-link :to="/about" event="mouseover">关于</router-link>

router-view 添加类名

<router-view class="className"></router-view>

这样设置完后,只要组件在这个 router-view 里渲染的,那么就会在组件的根节点中添加这个类型,还记得我们在写组件时,每个组件中的<template></template>标签里有且只能有一个根节点吗?如果组件里的根节点已经有类名了,那么 Vue 会很聪明地帮你把类名合并进去而不是替换掉原来的。

路由重定义写法

路由重定向有四种写法:

{
  path: '*', // 通配符,如果前面都路由都没匹配到,那到就走这里
  // 写法一:
  redirect: '/home',
  // 写法二:
  redirect: {
    name: 'Home' // 这个名字是我们定义路由时添加的
  },
  // 写法三:
  redirect: {
    path: '/home',
  },
  // 写法四:
  redirect: (to) => { // 参数 to 为目标路由对象(包含当前访问的路径信息)
    return '/home'
  }
}

路由别名

给路由添加别名,我们可以通过 alias 属性来定义。

routes: [{
  path: '/home',
  name: 'Home',
  component: Home,
  alias: '/index'
}]

配置完别名后,不管你访问的是/home,还是/index 这两个 url 都会切换并显示 Home 组件。但用了别名后,当用别名访问时,当前菜单就不会处于激活动态。

路由嵌套

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/parent',
      component: Parent, // 如果父组件设置了默认的子组件,那么这个父组件就不需要添加 name 属性,而是把这个 name 写到默认的子组件中,就像下面这样
      children: [{
          path: '', // 作为父路由的默认子路由,即访问父路由时默认展示这个子组件
          name: 'Parent',
          component: ChildFirst
        },
        {
          path: '/childSecond', // 这里前面加斜杠,默认添加到根路径中,而不是嵌套在父路由中,这里所说的是 url 的嵌套
          name: 'ChildSecond',
          component: ChildSecond
        }
      ]
    }
  ]
})

你可以像下面这样书写跳转链接

<template>
 <div>
    <ul>
     <li><router-link to="/parent">子组件一</router-link></li>
     <li><router-link to="/childSecond">子组件二</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

如果想子 url 嵌套在父 url 中, 那么我要把 path 参数前去掉斜杠,然后要像下面这样书写跳转链接

<li><router-link to="/parent/childSecond">子组件二</router-link></li>

上面的两种方法都可以,主要是看你自己怎么规划 url 了。

路由配置中的 name 属性我们还可以把它当作 router-link 的参数,跟上面的 to=”/parent” 写法差不多,也就是说 to 实现跳转的方式有两种,一种是写路由配置的 path 属性值,另一种是以对象的形式书写路由的 name 属性值进去,举个例子:

<li><router-link :to="{name:'ChildSecond'}">子组件二</router-link></li>

如果用了 :to=”{name:’ChildSecond’}” 这种方法书写跳转的话,此时路由配置中的 path 属性值前加不加斜杠,也是有区别的,同上面的一样,加斜杠子路由就真的跟在根路由后(/#/childSecond),不加斜杠的话,就跟在父路由后(/#/parent/childSecond)。

命名视图

有时候我们不只是在一个页面中显示一个<router-view />,而是要显示多个<router-view />视图以满足项目需求,此时我们可以在页面中直接添加多个<router-view /> 只不过,我们需要给每一个 <router-view />  添加一个 name 属性作为区分,可以有一个不加 name 属性,为作默认的视图容器 :

<template>
  <div id="app">
    <router-link to="/parent">父组件</router-link>
    <router-view/>
    <router-view name="viewFirst" />
    <router-view name="viewSecond" />
  </div>
</template>

路由配置要这么写,注意是 components 而不是 component


export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/parent',
      components: {
        default: Parent,
        viewFirst: ChildFirst,
        viewSecond: ChildSecond
      }
    }
  ]
})

在 components 里面的 default 表示没有添加 name 属性的<router-view> 其它的话就是<router-view>的 name 属性作为key 值,对应一个要显示的组件名。

滚动行为

export default new Router({
  scrollBehavior(to, from, savePosition) {
    // to 目标路由
    // from 原路由
    // savePosition 只有点击了浏览器中的前进后退时才会有值,值为浏览动条的偏移量如:{x: 0, y: 0}
    if (savePosition) {
      return savePosition;
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  },
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }]
})

当两个菜单内容很多时你来回切换后,点击浏览器的前进后退时,Vue 会定位到切换前浏览的位置。我们还可以使用哈希的写法定位到指定的位置,对上面的 scrollBehavior 方法稍作修改就可以了:

scrollBehavior(to, from, savePosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
},

接着我们还需要修改下 <router-url>,在 to 中传递这个哈希值,

<router-link to="/parent#a">父组件</router-link>

最后我们要在路由为/parent 的页面中添加一个锚点(id=”a”),告诉 Vue 要定位到哪里。

动态路径参数

跳转时这样传参数,这里是直接写死的,但是在实践应用中一般都不是写死的,比如要传的是用户的 id ,此时 to 前面记得添加 : 哦。

<router-link to="/user/1">用户目录</router-link>

路由配置

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user/:userId?',
      name: 'User',
      component: User
    }
  ]
})

path: ‘/user/:userId?’ 中的问号表示 userId 参数是可选的,可能通过 this.$route.params.userId 来获取这个参数,$route 保存的是当前激活的路由对象,还有一个跟它很像的就是 $router ,这个表示是路由的实例。如果想知道这两个对象里都有些什么东东,你可以在 created 方法中打印下这两个对象。

多路由共用一个组件

多个路由共用一个组件这种情况还是很多的, 比如上面的代码,每个 user 都会有一个userId ,但它们都是用同一个组件,在这种情况下如果你切换用户时,虽然 url 是变量了,但组件不会重新渲染,这就导致了create 方法只执行一次,对应用户的内容没有被更新到(代码没被执行)。此时我们可以用 watch 来对 $route 进行监控,就像下面这样写:

export default {
  name: "User",
  watch: {
    $route() {
      console.log(this.$route); // 只要路由有变化,这里每次都会执行,把数据处理代码放在这里就可以了
    }
  },
  created() {
    console.log(this.$route); // 这里只会执行一次
  }
};

但是还有一个更加巧妙的写法,不用通过 watch 来监听路由变化,然后执行函数。通过给 router-view 标签设置一个唯一的 key 值:

<router-view :key="$route.fullPath"></router-view>

这里不仅可以是 $route.fullPath 任何其它值都可以,只要能唯一标识组件就可以。配置了 key 值,如果跳转到同一个组件时, Vue 并不会使用已有的,而是重新创建一个新的组件。在实际项目中,要用哪一种,可以自己衡量下。

query 字符串传参

这个传参就跟上面的动态路由作用差不多,都是在url 中添加一些参数,从而达到某种目的

<!-- 一般形式 -->
<li><router-link to="?info=space">我的空间</router-link></li>
<li><router-link to="?info=focus">我的关注</router-link></li>

<!-- 对象的形式,用对象的形式,你可以同时添加多个参数 -->
<li><router-link :to="{path:'',query:{info:'space'}}">我的空间</router-link></li>
<li><router-link :to="{path:'',query:{info:'focus'}}">我的关注</router-link></li>

上面的 path 为空,表示在当前路由后添加 query 参数

动画过渡篇

导航切换过渡动画

<transition mode="out-in"> 
    <router-view></router-view>
</transition>

配合样式

.v-enter {opacity: 0;}
.v-enter-to { opacity: 1;}
.v-enter-active {transition: 0.2s;}
.v-leave {opacity: 1;}
.v-leave-to {opacity: 0;}
.v-leave-active {transition: 0.2s;}

样式的类名前缀可以改,但后面的不可以改,mode 的值有两个:out-in (先出后进)和 in-out(后进先出)。

如果把前缀改了,要用到transition 中,你要这样写,比如你把前缀 v 改成了,yunkus,那么你就需要告诉 transition

<transition name="yunkus"> 
    <router-view></router-view>
</transition>

过滤标签的选择

<transition></transition> 只能作用于单个元素,如果是多个并行元素可以使用 <transition-group>,不然全给你报错。

报错

[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.

其它

watch 有乾坤

watch 默认情况下,在组件第一次创建时是不是执行的,只有当监听的目标发生变化后才会触发。虽然我们可以使用 created 函数钩子来完成这个动作,但我们可以做得更好,把 watch 改成下面这样的写法,就无需配合 created 了。自己就可以完成在组件创建时执行一次的动作。

watch: {
  inputName: {
    handler(curVal, oldVal) {
      // 处理函数
      console.log(curVal, oldVal);
    },
    immediate: true // 创建组件时立刻执行一次
  }
},watch: {
  inputName: {
    handler(curVal, oldVal) {
      // 处理函数
      console.log(curVal, oldVal);
    },
    immediate: true // 创建组件时立刻执行一次
  }
}

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-encyclopedia/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END