vue编程式导航，命名路由

Posted 2022-05-10 ll15888

//使用 window.location.href 的形式，叫做 编程式导航   绑定事件的形式
<template>
    <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
    </div>
</template>

</script>
export default 
   goDetail(id) 
      // 使用JS的形式进行路由导航

  
      // 1. 最简单的
      // this.$router.push("/home/goodsinfo/" + id);

      // 2. 传递对象
      // this.$router.push( path: "/home/goodsinfo/" + id );

      // 3. 传递命名的路由
      this.$router.push( name: "goodsinfo", params:  id : id  );
    
  
;
</script>

var router = new VueRouter(
  routes: [ // 配置路由规则
     path: ‘/‘, redirect: ‘/home‘ ,
     path: ‘/home‘, component: HomeContainer ,
     path: ‘/home/goodsinfo/:id‘, component: GoodsInfo, name: ‘goodsinfo‘ ,
     path: ‘/home/goodsdesc/:id‘, component:GoodsDesc, name: ‘goodsdesc‘  ,
  ],
  linkActiveClass: ‘mui-active‘ 
  // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
)

//配置路由的规则的属性包含：path，redirect，component，children，name

注意： 一定要区分 this.$route 和 this.$router 这两个对象，
this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址