vue跳转详情页

在Vue中实现跳转详情页，可以使用Vue Router。下面是一个简单的例子：

1. 首先，在router/index.js文件中定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import Detail from '@/components/Detail'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

在这里，我们定义了两个路由：Home和Detail。其中Detail路由包含一个参数:id，表示详情页的id。

2. 在Home组件中，我们可以使用router-link标签来实现跳转：

<template>
  <div>
    <h1>Home Page</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <router-link :to="{ name: 'Detail', params: { id: item.id }}">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: 'Article 1' },
        { id: 2, title: 'Article 2' },
        { id: 3, title: 'Article 3' }
      ]
    }
  }
}
</script>

在这里，我们使用了v-for指令遍历文章列表，并使用router-link标签来包装每个文章标题。当用户点击标题时，路由会自动跳转到详情页，并将对应的id传递给Detail组件。

3. 在Detail组件中，我们可以通过$route对象来获取id参数：

<template>
  <div>
    <h1>Detail Page</h1>
    <p>Article ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在这里可以根据id加载文章内容
    console.log('Article ID:', this.$route.params.id)
  }
}
</script>

在这里，我们使用$route.params.id来获取路由参数中的id值，并在mounted钩子函数中打印它。你可以在这里编写相应的业务逻辑，例如根据id加载文章内容。