编程式导航和声明式导航

Posted 2022-03-29 jtjianfeng

编程式导航和声明式导航

编程式跳转：用于在js中处理逻辑后需要页面进行跳转

vue的路由我们可以看做是一个数组，每次添加一个页面可以看成是向数组中push一个地址，当点击返回时就是向数组中的上一个值查找。

编程式跳转其实就是调用:this.$router.push( )

在li 标签中加入点击函数@click="goDetail(item.id)"

<!-- 编程式跳转 -->
    <li class="proitem" v-for="(item, index) of prolist" @click="goDetail(item.id)" :key="index">
      <div class="itemimg">
        <img :src="item.images.small" :alt="item.alt" />
      </div>
      <div class="iteminfo">
        <h3> item.title  ---  item.rating.average </h3>
        <div class="directors">
          导演：<span v-for="(itm, idx) of item.directors" :key="idx"> itm.name /</span>
        </div>
        <div class="casts">
          演员： <span v-for="(itm, idx) of item.casts" :key="idx"> itm.name /</span>
        </div>
        <Rating :rating="(item.rating.average / 2).toFixed(1)"/>
      </div>
    </li>

 

在export default中的methods中加入

goDetail(id) 
    //this.$router.push( ‘/detail/‘ + id ) //string类型的参数
    //this.$router.push(  name: ‘detail‘, params:  id   ) //object类型参数
    this.$router.push(  path: ‘/detail/‘ + id  ) //object类型 

声明式导航：用于直接渲染到页面中，

声明式跳转中的to参数怎么写，编程式跳转中参数就怎么写

<router-link tag="li" :to=" name: ‘detail‘, params:  id: item.id  " class="proitem" v-for="(item, index) of prolist" :key="index">
</router-link>