主页

vue 路由跳转的方法文章详情页面

2023-11-13 08:30PM

路由文件的内容如下:

import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from '@/components/ArticleList'
import ArticleShow from '@/components/ArticleShow'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/articles',
      name: 'ArticleList',
      component: ArticleList
    },
    {
      path: '/article',
      name: 'ArticleShow',
      component: ArticleShow
    }
  ]

1. 使用 v-link 

<router-link :to="{name: 'ArticleShow", query: { id: article.id } }>
  <p>
    {{ article.created_at }}&nbsp;&nbsp;
    {{ article.title }}
  </p>
</router-link>

然后在浏览器点击 "标题/创建时间" 链接,就可以跳转到文章详情页面

[video-to-gif output image]

2.  使用事件

<template>

  ……

  <td @click='show_article(article.id)'>
    {{ article.created_at }}&nbsp;&nbsp;
    {{ article.title }}
  </td>

</template>

<script>

  ……

    methods: {
      show_article: function (articleId) {
         this.$router.push({name: 'ArticleShow', query: {id: articleId}})
       }
     }

}

</script>

然后在浏览器双击 "标题/创建时间",就可以跳转到文章详情页面

[video-to-gif output image]

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论