编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push()

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

示例：路由导航的创建

// 字符串 router.push('home')

// 对象 router.push({ path: 'home' })

// 命名的路由 router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

实例

1.在 router /index.js中配置路由

// 配置路由规则
const router = new VueRouter({
  routes: [

    { path: '/home/photoinfo/:id', component: PhotoInfo, name: 'photoinfo' },

]
})

2.在photo/List.vue 给 li 标签添加一个 goPhotoInfo 方法

<template>
        <ul class="category-img-list">
            <li class="img-list-item" v-for="item in imgsList" :key="item.id" @click="goPhotoInfo(item.id)">
                <img v-lazy="item.img_url">
                <div>
                    <h2>{{ item.title }}</h2>
                    <p>{{item.zhaiyao}}</p>
                </div>
            </li>
        </ul>
</template>

3.在photo/List.vue 给 goPhotoInfo 方法注册事件

<script>
export default {
 methods : {
 goPhotoInfo(id) {
            // 通过 编程式导航 的方式来实现路由跳转
            // 1 通过 path，拼接path和参数
            // this.$router.push({ path: `/home/photoinfo/${id}` })
            
            // 2 通过 路由规则的name属性，以及params参数
      this.$router.push({ name: 'photoinfo', params: { id } })
    }
  }
}
</script>