Vue知识点整理3

vue过度与动画

- 元素进入的样式：
  v-enter: 进入的起点
  v-enter-active: 进入过程中
  v-enter-to: 进入的终点
- 元素离开的样式：
  v-leave: 离开的起点
  v-leave-active: 离开的过程中
  v-leave-to: 离开的终点

使用<transition>包裹要过度的元素，并配置name属性

<transition name="binge">
    <h3 v-if="bool">你好！</h3>
</transition>

若有多个元素需要过度，则需要使用<transition-group>，且每个元素都要指定key值

路由

vue路由的实现原理?
a标签href值如果以#开头, 访问时#开头的路径会被拼接到url路径上,且页面不刷新
以#开头的路径地址, 叫做哈希(hash)值
哈希值特点:
哈希值改变时, 页面不会刷新
哈希值不会由ajax请求发给服务器
哈希值变化时,会触发hashChange事件
vue路由的配置步骤
(1)导入vue路由插件 <script src="vue-router.js"></script>
(2)在vue模板中添加路由跳转标签 <router-link to="/home">主页</router-link>
(3)创建路由分发跳转的组件 Vue.component("homeCom", {template: "<h1>这是首页</h1>"})
(4)创建路由对象,并配置路由信息 new VueRouter({ routes：{path: "/home", component: Home} })
(5)在vue根组件中注册路由 router
(6)根组件模板中,设置路由出口 <router-view></router-view>
路由有哪两种跳转方式?
编程式导航跳转 router.push('/home')
router.push({path: "/home"})
router.push({path: "main"})

router.forward() 前进
router.back() 后退
router.go() 可前进可后退
this.$router 和 this.$route 的区别?
this.$router 是全局唯一的路由配置对象, 固定不变
this.$route 是当前路由页面对应的路由信息对象, 路由跳转时会更新
vue路由有哪四种传值方式?
(1)url拼接键值对传值
router.push("/home?name='zs'") 使用$route.query接收
(2)动态url/友好型url传值
router.push("/home/") 使用$route.params接收
(3)路径跳转+query对象传值
router.push({path: "/home",query: {name: this.name}}) 使用$route.query接收
(4)命名路由+params对象传值
router.push({name: "main",params:{name: this.name}}) 使用$route.params接收

注: path路径跳转只可以携带query参数, name路由名跳转可以携带params参数和query参数
vue路由四种传值方式的优缺点对比
四种方式中, 1,2,3方式都是把参数拼到了url路径上, 而第4种方式的params参数没有在路径上拼接(第4种方式的query参数也是在url上拼接的)
在url路径上拼接参数, 好处是: 页面刷新时数据不丢失 , 弊端是: 安全性低,且数据大小限制
第4种方式的params参数好处: 安全性高,且数据大小无限制, 弊端是: 页面刷新, 数据会丢