vue路由传参，删除和 监听

路由传参的两种方式params和query

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用!

1.Params

// 通过params属性传值
// 路由配置
{
    path:"/menuLink",
    name:"menuLink",
    component:MenuLink
}
this.$router.push({name:"menuLink",params:{name:"测试"}})


// 通过动态路由方式
// 路由配置
{
    path:"/menuLink/:name",
    name:"menuLink",
    component:MenuLink
}

// 页面配置
var name = "测试"
this.$router.push("/menuLink/" + name)


// 取参

<p>提示：{{this.$route.params.name}}</p>

2.Query

// 传参

// 路由配置
{
    path:"/menuLink",
    name:"menuLink",
    component:MenuLink
}

this.$router.push({path:"/menLink",query:{name:"测试"}})



//用query获取值

<p>提示：{{this.$route.query.name}}</p>

删除页面参数

delete this.$route.query.XXX; // XXX代表要删除的参数（即url参数key）

created（）{
    const data=this.$route.query;

    if(data.code){
        delete this.$route.query.code  删除页面参数
    }
} 

清除地址栏路由参数

this.$router.push({ query: {} }); // 删除页面参数

created（）{

    const data=this.$route.query;

    if(data.code){

        delete this.$router.push({query:{}})  删除页面参数

    }

}

监听路由获取新老路由信息（handler 函数 ）

export default{
    watch: { // 监听,当路由发生变化的时候执行
        '$route': { // $route可以用引号，也可以不用引号
            handler(to, from){
            console.log('路由变化了')
            console.log('当前页面路由：' + to); //新路由信息
            console.log('上一个路由：' + from); //老路由信息
            },
            deep: true, // 深度观察监听
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    }

 监听路由变化触发方法

// 方式3、监听路由 $route 变化，触发methods里的方法
export default{
  watch: { 
    '$route':'getPath'
  },
  methods: {
    getPath(){
       console.log(this.$route.path); // 监听,当路由发生变化的时候执行
    }
 
  }
 
}

 监听路由的 path 变化

export default{
    watch: { // 监听,当路由发生变化的时候执行
        '$route.path'(toPath, fromPath){
            console.log('当前页面路由地址：' + toPath)
            console.log('上一个路由地址：' + fromPath)
         },
    }

通过vue-router的组件内钩子函数beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave进行监听

<script>
  // 引入 Tabbar组件
  import mTabbar from './Tabbar'
  import mTabbarItem from './TabbarItem'
  // 引入 vuex 的两个方法
  import {mapGetters, mapActions} from 'vuex'
  
  export default {
    name: 'app',
    // 计算属性
    computed:mapGetters([
      // 从 getters 中获取值
      'tabbarShow'
    ]),
 
    // 监听,当路由发生变化的时候执行
    watch:{
      $route(to,from){
        if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' ||
         to.path == '/Time' || to.path == '/Mine'){
          /**
           * $store来自Store对象
           * dispatch 向 actions 发起请求
           */
          this.$store.dispatch('showTabBar');
        }else{
          this.$store.dispatch('hideTabBar');
        }
      }
    },
 
    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当钩子执行前，组件实例还没被创建
    },
 
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
 
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    },
 
    components:{
      mTabbar,
      mTabbarItem
    },
 
    data() {
      return {
        select:"Building"
      }
    }
  }
</script>