页面跳转及刷新

页面整体刷新

location.reload();

页面局部刷新

在Vue中，我们经常遇到对数据进行增删改查的操作之后, 希望页面显示的是我们操作之后最新的数据, 为了避免重新做axios请求, 此时用到组件的刷新是很方便的了, 以下便是我做项目中总结的组件局部刷新的方法:

• 首先需要修改App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>
<script>
export default {
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  }
}
</script>

• 到需要刷新的页面进行引用，使用inject导入引用reload，然后直接调用即可

  ###导入
  export default{
  	inject:["reload"],
  	data(){
  		return{}
  	}
  }
  
  ###使用
  this.reload()
  

页面跳转传参

//query,用路径跳转

this.$router.push({
    path:'/about',
    query:{
        name:'about',
        code:111
    }
})

#接收参数
this.$route.query

是{name: "about", code: "111"}


（新页面形式）
let routeInfo = this.$router.resolve({ path: '/page/search',query:{keywords:value} });
window.open(routeInfo.href, '_blank');
接收参数：
this.$route.query.keywords  

页面跳转——window.location.href

window.location.href = 'http://www.baidu.com';

实现后退功能

function backWay() { 
	// history.back();
    	history.go(-1); 
        }

router-link跳转

1.不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。
 
2.带params参数
<router-link :to="{name:'home', params: {id:123456}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失；配置path,刷新页面id会保留。
// html 取参 $route.params.id    script 取参 this.$route.params.id
 
3.带query参数
<router-link :to="{name:'home', query: {id:123456}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id    script 取参 this.$route.query.id

ps : 区别

• this.$router.push
  跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面。

• this.$router.replace
  跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上个页面 (直接替换当前页面)。

• this.$router.go(n)
  向前或者向后跳转n个页面，n可为正整数或负整数。