路由跳转方式、刷新当前页面方式、切换页面时怎么设置过渡动画

2024-06-01 07:17| 来源: 网络整理| 查看: 265

路由跳转方式

vue-router控制路由则必须router-view作为容器

1：router-link 声明式不传参 // 浏览器在解析时，将它解析成一个类似于的标签。或者传参 2: this.$router 编程式 // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId: wise }}) 不传参 this.$router.push({path:'路径')}; this.$router.push({name:'组件名')}; this.$router.push('/xqgl/ysjhgl/cjysjh'); // 路径：'/xqgl/ysjhgl/cjysjh' 传参 // 引入 // query 要用 path引入路由 // params只能用name来引入路由 // 传递 // query传递方式类似于我们ajax中get传参，在浏览器地址栏中显示参数, // params则类似于post，在浏览器地址栏中不显示参数 this.$router.push({path:'/index',query:{aa:xx, bb: xx}}); //带查询参数，类似于 “？” 的形式传值 this.$router.push({name:'Index',params:{aa:xx, bb: xx}}); this.$router.replace{path：‘/’ } // 这里要特别注意在子组件中获取参数的时候是$route.params、 $route.query而不是 $router

举例：

跳转并传值： this.$router.push({ path:'/index', query:{id:'123'} }); // 带查询参数，变成/index?id=123 取值：this.$route.query.id ; 跳转并传值： this.$router.push({ name:'Index', params:{id:'123'} }); 取值：this.$route.params.id ; 方案一： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) }

对应路由配置如下：

{ path: '/describe/:id', name: 'Describe', component: Describe }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id 方案二：

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({ name: 'Describe', params: { id: id } })

对应路由配置: 这里可以添加:/id 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示

{ path: '/describe', name: 'Describe', component: Describe }

获取参数

this.$route.params.id 方案三：

使用path来匹配路由，然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({ path: '/describe', query: { id: id } })

对应路由配置：

{ path: '/describe', name: 'Describe', component: Describe }

获取参数

this.$route.query.id vue 刷新当前页面方式

Vue是双向数据绑定的，操作数据实时变化，大多情况不需要刷新页面。

通常情况下我们喜欢设置keepAlive 包裹 router-view

同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。

1：使用window.location window.location.href window.location.replace() window.location.reload() this.$router.go(0)

缺点：会出现空白，相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

2：先进入一个空路由，然后返回 // 第一种方式 reflashPage(){ let NewPage = '_empty' + '?time=' + new Date().getTime()/500; this.$router.push(NewPage); this.$router.go(-1); } // 第二种方式新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来 // 空白页supplierAllBack.vue里面的内容： export default { data () { this.$router.replace({ path:'/home', name:'home' }) return { ... } }, }

缺点：刷新后点浏览器的前进按钮会出现空白页,地址栏有个快速的切换的过程

3：使用 provide / inject

简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

// app.vue export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return{ isRouterAlive:true } }, methods:{ reload(){ this.isRouterAlive = false; this.$nextTick(function(){ this.isRouterAlive = true; }) } } }

需要跳转的页面：前面会有这个 inject

export default { inject:['reload'], data () { return { ... } }, }

后面想刷新当前页面的地方这样写：

this.reload(); 4：使用watch的方法，具体的可以看一下官方文档 // 官方给出的方法是通过 watch 监听路由变化，做判断路由路径然后调用响应的方法 // 方法一 watch: { '$route': function (to, from) { this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId) // 通过更新Vuex中的store的数据，让数据发生变化 this.getTemplateById() } } // 方法二 watch: { '$route' () { if (this.$route.path === 'test') { this.test(); } } } // 方法三 watch: { 'id': { handler: 'test', //调用方法 immediate: true, //进入立即执行一次 } }, 5：通过改变router-view中的key来达到刷新组件的目的 // 用一个简单粗暴的方式来改变key，时间戳（捂脸）,key的值必须是字符串或者数字。 this.activeDate = (new Date()).toString(); 6：给 router-view 设置 key 属性为路由的完整路径

缺点：这种方法我觉得应该是一劳永逸的方法，可能对性能造成一定损耗。不适用于一个tab切换路由并加载列表的组件，会造成页面白屏，dev模式不会自动刷新，是个坑

7：通过组件导航守卫来设置对应的meta 属性 beforeRouteEnter: (to, from, next) = > { // 写在当前组件 to.meta.keepAlive = false next() }, beforeRouteLeave: (to, from, next) = > { // 写在前一个组件 to.meta.keepAlive = false next() }, vue-router 切换页面时怎么设置过渡动画

如何实现切换页面时的过渡动画?

// 实现难点如何判断切换路由时是前进还是后退每次切换时向左向右切换动画如何实现 // 解决方案我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. // router/index.js import VueRouter from 'vue-router' import Home from '../components/home/home' import User from '../components/user/user' var router = new VueRouter({ routes:[{ name:'test', path:'/', meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高 component:{ template:'test' } },{ name:'home', path:'/home', meta:{index:1}, component:Home },{ name:'user', path:'/user/:id', meta:{index:2}, component:User }] });

监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

export default { name: 'App', data(){ return { transitionName:'' } }, watch: {//使用watch 监听$router的变化 $route(to, from) { //如果to索引大于from索引,判断为前进状态,反之则为后退状态 if(to.meta.index > from.meta.index){ //设置动画名称 this.transitionName = 'slide-left'; }else{ this.transitionName = 'slide-right'; } } } } // 编写slide-left 和 slide-right 类的动画 .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 500ms; position: absolute; } .slide-right-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); }

【本文地址】

公司简介

联系我们