编程式导航和声明式导航

编程式导航和声明式导航

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

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