如何使用Vue Router 3(Vue 2)在哈希模式下使用params设置路由

Question

目前，我的Vue路由器正在为我的路由器使用哈希模式，我正在寻找一种在生成到另一个组件的链接时传递参数的方法。到目前为止，我想出了这个：

这就是它目前在我的Markup:中的样子

<b-button variant="primary" class="rounded-0" :href="'/article/' + article.id" >View post</b-button>

我将文章id传递到链接中，这样当用户单击按钮时，它会将他引导到一个组件，在该组件中，可以看到具有相应id的文章及其内容。

设置路由时出现问题，下面是路由器下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '@/views/Main.vue'

Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/menu',
name: 'Menu',
component: ()=> import('../views/Menu.vue')
},
{
path:'/cart',
name:'Cart',
component: () => import('../views/Purchase.vue')
},
{
path:'/blog',
name:'Blog',
component: () => import('../views/Blog.vue')
},
{
path:'/article/:id',
component: ()=> import('../views/ArticlePage.vue')
}
// {
//   path: '/about',
//   name: 'About',
//   // route level code-splitting
//   // this generates a separate chunk (about.[hash].js) for this route
//   // which is lazy-loaded when the route is visited.
//   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
]
const router = new VueRouter({
base: process.env.BASE_URL,
routes
})
export default router

正如您在/article/：id路径中看到的那样，我正试图将它与ArticlePageComponent链接起来。问题是/article/：id似乎不适用于哈希模式，它只会将我重定向到主页。有什么建议吗？

Answer 1

与其在b-button中有href，为什么不在等方法中有一个处理程序

routePage(article) {
this.$router.push({
path: `/article/${article.id}`
});
}

并在点击事件时触发

<b-button variant="primary" class="rounded-0" @click="routePage(article)" >View post</b-button>