编程式导航和声明式导航

标签：tag   att   info   rect   load   ack   param   cli   ring   

编程式导航和声明式导航

编程式跳转：用于在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>

编程式导航和声明式导航

标签：tag   att   info   rect   load   ack   param   cli   ring   

原文地址：https://www.cnblogs.com/jtjianfeng/p/11155195.html