配置：

 import ArticleDetail from '@/views/AdminFrame/ArticleAdmin/ArticleDetail.vue'
const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
   
    {
      path: '/AdminFrame/ArticleAdmin/ArticleDetail/:id', // 访问路径
      name: 'ArticleDetail', // 路由名称，建议设置，便于编程式导航
      component: ArticleDetail // 对应的组件
    },
  ]
});

打开，这里是弹出新网页标签：

js实现：

// 使用路径参数，确保路由配置了 /article/detail/:id
  const url = `/AdminFrame/ArticleAdmin/ArticleDetail/${articleId}`;
  console.log('打开URL:', url);
  window.open(url, '_blank');

html标签实现：

<a :href="`/AdminFrame/ArticleAdmin/ArticleDetail/${6}`" 
   target="_blank" 
   class="btn btn-primary">
  查看详情1
</a>


<router-link 
  :to="{ name: 'ArticleDetail', params: { id: 6 } }" 
  target="_blank" 
  class="btn btn-primary"
>
  查看详情2
</router-link>

以上两种标签都可。

效果：

显示在浏览器输入框中的url：