路由跳转方式、刷新当前页面方式、切换页面时怎么设置过渡动画
路由跳转方式vue-router控制路由则必须router-view作为容器1：router-link声明式不传参// 浏览器在解析时，将它解析成一个类似于<a> 的标签。<router-link :to="{name:'index'}}">或者<router-link to='/index'>传参<router-link :to="{name:'inde
·
路由跳转方式
vue-router控制路由则必须router-view作为容器
1：router-link 声明式
不传参
// 浏览器在解析时，将它解析成一个类似于<a> 的标签。
<router-link :to="{name:'index'}}">
或者
<router-link to='/index'>
传参
<router-link :to="{name:'index',query:{id:'xxx',name:'xxx'}}">
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
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
需要跳转的页面： 前面会有这个 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来达到刷新组件的目的
<router-view :key="activeDate"></router-view>
// 用一个简单粗暴的方式来改变key，时间戳（捂脸）,key的值必须是字符串或者数字。
this.activeDate = (new Date()).toString();
6：给 router-view 设置 key 属性为路由的完整路径
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
缺点：这种方法我觉得应该是一劳永逸的方法，可能对性能造成一定损耗。不适用于一个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:'<div>test</div>'
}
},{
name:'home',
path:'/home',
meta:{index:1},
component:Home
},{
name:'user',
path:'/user/:id',
meta:{index:2},
component:User
}]
});
监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.
<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
<script>
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';
}
}
}
}
</script>
<style>
// 编写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);
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)