vue动画和路由传值

最新推荐文章于 2023-08-30 18:17:00 发布

吃蛋糕的居居

最新推荐文章于 2023-08-30 18:17:00 发布

阅读量429

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45133582/article/details/119333033

版权

一、过度&动画介绍

Vue在插入、更新或者移除 DOM时，提供多种不同方式的应用过渡效果

1.在CSS过渡和动画中自动应用class.

2.可以配合使用第三方 CSS 动画库，如 Animate.css

3.在过渡钩子函数中使用JavaScript直接操作 DOM.

4.可以配合使用第三方JavaScript 动画库,如 Velocity.js

二、组件过渡

Vue提供了 transitIon的封装组件，在下列情形中,可以给任何元素和组件添加进入/离开过渡。

当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：

1.自动检索目标元素是否应用了CSS过渡或动画,如果是，在恰当的时机添加/删除CSS类名。

2.如果过渡组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用。

3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行。

三、过度的类名：(在进入/离开的过渡中，会有6个class 切换。)

1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter被移除)，在过渡/动画完成之后移除。

4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除)，在过渡/动画完成之后移除。

四、自定义过渡的类名：过度的类名：

我们可以通过以下 attribute 来自定义过渡类名：

1.enter-class

2.enter-active-class

3.enter-to-class (2.1.8+)

4.leave-class

5.leave-active-class

6.leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

五、javascript钩子函数

1.一个元素出现的过渡包括四个节点:before-enter, enter, after-enter, enter-cancelled,分别代表开始出现前,出现中,出现后。元素的离开也一样。借助V-on可以在这些节点挂载钩子函数，用于在元素过度的各节点触发这些函数。

2.出现前主要用于配置一些参数:如将opacity设置为0,enter是进入的动画过程函数。同理before-leave是离开前的状态设置,leave对应的是消失的过程函数。

3.以上钩子函数会被传入被过渡元素el作为第一个参数。

4.js钩子函数依赖Velocity

Velocity是一个具有与jQuery的$ .animate()相同的API的动画引擎。它适用于和不使用jQuery。它速度非常快,它具有彩色动画,变换，循环,缓动，SVG支持和滚动功能。这是jQuery和CSS转换的最佳组合。

六、路由信息对象

1.一个路由对象(route object)表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录(route records)。

2.路由对象是不可变(immutable)的,每次成功的导航后都会产生一个新的对象。

3.路由对象出现在多个地方：

1)在组件内,即this.$route

2)在$route观察者回调内

3)router.match(location)的返回值

七、路由信息对象的属性

1. $route.path

-类型:string

-字符串,对应当前路由的路径,总是解析为绝对路径,如“/foo/bar"

2.$route.params

-类型: Object

-一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

3.$route.query

-类型: Object

-一个key/value对象，表示URL 查询参数。例如,对于路径

/foo?user=1，则有$route.query. user ==1,如果没有查询参数.则是个空对象。

4.$route.hash

-类型:tring

-当前路由的hash 值(带#),如果没有hash 值,则为空字符串

5.$route.fullPath

一类型:string

-完成解析后的URL,包含查询参数和hash 的完整路径。

6.$route.name

-当前路由的名称,如果有的话。(查看命名路由)

7.$route.matched

-一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是routes配置数组中的对象副本（还有在children 数组).

八、路由

1.<router-link>即: API<router-link>组件支持用户在具体路由功能的应用中(点击)导肌。通过属性指定目标地址,默认渲染成带有正确链接的<a/>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的CSS类名。另外，router-link可以直接添加class和style来写样式。

2.<router-view>:组件是一个功能组件，渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的<router-view>,根据嵌套路径,渲染嵌套组件。

1)注:无论是HTML5历史模式还是哈希模式,它的表现行为一致,所以,当你要切换路由模式,或者在IE9降级使用哈希模式,无须作任何变动。

2)在HTML5 history模式下，router-link会拦截点击事件，让浏览器不在重新加载页面。

九、路由传值的具体思路：

一、js

1.引入<Vue Router>

2.创建对象

3.使用Vue Router( Vue.use )

4.创建路由：

(1)调用组件。

(2)路由对象。

(3)放在router对象中。(把对象放在Vue Router中)

(4)对象放入Vue中。

二、DOM

1.<Vue Router>导航信息

2.<route-view>放入、切换的数组组件(渲染组件)

十、实例：

index.html:

<!doctype html>
<html>

<head>
  <title>VUE练习</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

<body>
  <div id="e">
    <h2>路由</h2>
    <p>
      <router-link to="/foo">对象</router-link>
      <router-link to="/bar">工具</router-link>
    </p>
    <router-view></router-view>
  </div>
  <script src="./bundle.js"></script>
</body>

</html>

index.js:

import _ from 'lodash';
import Vue from 'vue';
import router from './router';

new Vue({
  el: "#e",
  data: {
  },
  router,
  methods: {
  },
  components: {},
})

router.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };

const router = new VueRouter({
    routes:[
        { path: "/foo", component: Foo }, { path: "/bar", component: Bar }
    ]
})

export default router;

最终效果图：

动态路由：

index.html:

<!doctype html>
<html>

<head>
  <title>VUE练习</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

<body>
  <div id="e">
    <h2>路由</h2>
    <p>
      <router-link to="/foo/a">对象</router-link>
      <router-link to="/bar">工具</router-link>
    </p>
    <router-view></router-view>
  </div>
  <script src="./bundle.js"></script>
</body>

</html>

router.js:


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Foo = { template: '<div>foo<p>{{$route.params.id}}</p></div>' };
const Bar = { template: '<div>bar</div>' };

const router = new VueRouter({
    routes: [
        { path: "/foo/:id", component: Foo }, { path: "/bar", component: Bar }
    ]
})

export default router;

最终效果图：

多层路由嵌套：

index.html:

<!doctype html>
<html>

<head>
  <title>VUE练习</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

<body>
  <div id="e">
    <h2>嵌套路由</h2>
    <p>
      <router-link to="/foo/a">首页</router-link>
      <router-link to="/foo/b">第二页</router-link>
      <router-link to="/foo/c">第三页</router-link>
      <router-link to="/foo/d">第四页</router-link>
      <router-link to="/foo/e">尾页</router-link>
    </p>
    <router-view></router-view>
  </div>
  <script src="./bundle.js"></script>
</body>

</html>

index.js:

import _ from 'lodash';
import Vue from 'vue';
import router from './router';

new Vue({
  el: "#e",
  data: {
  },
  router,
  methods: {
  },
  components: {},
})

router.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Foo = { template: '<div>我是公共部分<p>{{$route.params.id}}</p><router-view></router-view></div>' };
const A={template:'<div>我是A部分</div>'};
const B={template:'<div>我是B部分</div>'};
const C={template:'<div>我是C部分</div>'};
const D={template:'<div>我是D部分</div>'};
const E={template:'<div>我是E部分</div>'};

const router = new VueRouter({
    routes: [
        {
            path: "/foo/:id", component: Foo, children: [
                {
                    path: "/foo/a",
                    component: A,
                },
                {
                    path: "/foo/b",
                    component: B,
                },
                {
                    path: "/foo/c",
                    component: C,
                },
                {
                    path: "/foo/d",
                    component: D,
                },
                {
                    path: "/foo/e",
                    component: E,
                },
            ]
        },
    ]
})

export default router;