vue动态路由不匹配组件

Question

问题描述

最近在拿大前端的一个博客主题在本地练习使用Vue全家桶开发（可能不适合，但是还是想练习一下）已经规划好了顶部导航组件Header，底部版权部分的组件Footer，以及侧边栏的Sidebar组件。然后中间的内容列表和文章的详情页(Article.vue)就想在App.vue的 <router-view />里面做渲染，数据用的本地的mock。目前导航部分基本没什么问题了。但是现在在首页Index.vue，希望通过点击文章列表的文章链接，进入Article.vue.

相关代码

目录结构

路由配置：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Index",
    meta: {
      title: "首页"
    },
    component: () => import("@/views/Index/Index.vue")
  },
  {
    path: "/frontend",
    name: "Frontend",
    meta: {
      title: "前端"
    },
    component: () => import("@/views/Frontend/Frontend.vue")
  },
  {
    path: "/frontend/ecmascript",
    name: "EcmaScript",
    component: () => import("@/views/Frontend/EcmaScript.vue"),
    meta: {
      title: "前端"
    },
    //  /frontend/ecmascript/123.html
    children: [
      {
        path: ":id",
        name: "Article",
        component: () => import("@/views/Content/Article.vue")
      }
    ]
  },
  {
    path: "/about",
    name: "About",
    meta: {
      title: "关于我们"
    },
    component: () => import("@/views/About/About.vue")
  }
];
const router = new VueRouter({
  mode: "history",
  routes
});
export default router;

这个是首页列表中的的一个文章链接：

<router-link class="focus" :to="article.url" @click="getArcFromId(article)" exact>
 <img :alt="article.title" :src="article.cover" class="thumb" />
</router-link>

目前的情况是，任意点击一个文章链接，依然还是进入到该文章的栏目列表页也就是渲染栏目页的组件
1.希望点击这个文章链接，然后渲染Article.vue
2.如何通过链接把文章ID传入Article.vue，然后再相应的显示内容？

Answer 1

你期待的结果是什么？实际看到的错误信息又是什么？

不太懂你这句话的意思，你这句话是在问别人？还是在问你自己?

把这里的 to 拿掉，直接使用 @click 事件手动跳转

methods: {
    jumpToPage(article) {
        this.$router.push({
            pathname: `/article/${article.id}`
        });
    }
}

或者是去掉 @click，把 URL 地址拼接到 to 的值里