Quick solution:

projectDetails.vue

<template>    <div>        <div>            <h1>{{ projectDetails.title }}</h1>            <p>{{ projectDetails.description }}</p>        </div>    </div></template><script>    import json from '@/json/projectDetails.json';    export default {        name: 'projectDetails',        props: {            name: String,        },        data() {            return {                projectDetails: Object.values(json).find(project => project.title === this.name),            };        },    };</script>

In my opinion, a better solution:

I don't get the idea that you keep project data in 2 separate JSON files. During compilation, both files are saved to the resulting JavaScript file. Isn't it better to keep this data in 1 file? You don't have to use all of your data in one place. The second thing, if you have a project listing then you can do routing with an optional segment, and depending on whether the segment has a value or not, display the listing or data of a particular project. Then you load project data only in one place, and when one project is selected, pass its data to the data rendering component of this project. Nowhere else do you need to load this JSON file.

routes.js

import home from '@/components/home.vue';import about from '@/components/about.vue';import work from '@/components/work.vue';const routes = [    {path: '/', name: 'home', component: home},    {path: '/about', name: 'about', component: about},    {path: '/work/:name?', name: 'work', component: work, props: true},];export default routes;

work.vue

<template>    <div>        <project-details v-if="currentProject" :project="currentProject"/>        <projectLink v-else                      v-for="project in projects"                     v-bind="project"                     v-bind:key="project.projectName"        />    </div></template><script>    import projectLink from './projectLink';    import projectDetails from './projectDetails';    import json from '@/json/projectLink.json';    export default {        name: 'work',        props: {            name: String,        },        data() {            return {                projects: Object.values(json),            };        },        computed: {            currentProject() {                if (this.name) {                    return this.projects.find(                        project => project.projectName === this.name,                    );                }            },        },        components: {            projectLink,            projectDetails,        },    };</script>

projectDetails.vue

<template>    <div>        <div>            <h1>{{ project.title }}</h1>            <p>{{ project.description }}</p>        </div>    </div></template><script>    export default {        name: 'projectDetails',        props: {            project: Object,        },    };</script>

projectLink.vue (changed only one line)

<router-link v-if="projectName" :to="{ name: 'work', params: { name: projectName }}">

A full working example:

Vue.component("navigation", {  template: "#navigation"});const Projects = {  template: "#projects",  props: ["projects"]};const Project = {  template: "#project",  props: ["project"]};const HomePage = {  template: "#home"};const AboutPage = {  template: "#about"};const WorkPage = {  data() {    return {      projects: [{          slug: "foo",          name: "Foo",          desc: "Fus Ro Dah"        },        {          slug: "bar",          name: "Bar",          desc: "Lorem Ipsum"        }      ]    };  },  props: {    slug: String  },  template: "#work",  components: {    Projects,    Project  },  computed: {    currentProject() {      if (this.slug) {        return this.projects.find(project => project.slug === this.slug);      }    }  }};const router = new VueRouter({  routes: [{      path: "/",      name: "home",      component: HomePage    },    {      path: "/about",      name: "about",      component: AboutPage    },    {      path: "/work/:slug?",      name: "work",      component: WorkPage,      props: true    }  ]});new Vue({  router,  template: "#base"}).$mount("#app");

ul.nav {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: #333;}ul.nav>li {  float: left;}ul.nav>li>a {  display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}ul.nav>li>a:hover {  background-color: #111;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script><div id="app"></div><script type="text/x-template" id="base">  <div id="app">    <div>      <navigation></navigation>      <router-view></router-view>    </div>  </div></script><script type="text/x-template" id="navigation">  <ul class="nav" id="navigation">    <li>      <router-link :to="{name: 'home'}">Home</router-link>    </li>    <li>      <router-link :to="{name: 'about'}">About</router-link>    </li>    <li>      <router-link :to="{name: 'work'}">Work</router-link>    </li>  </ul></script><script type="text/x-template" id="home">  <div id="home">This is Home Page</div></script><script type="text/x-template" id="about">  <div id="about">This is About Page</div></script><script type="text/x-template" id="work">  <div id="work">    <project v-if="currentProject" :project="currentProject"></project>    <projects v-else :projects="projects"></projects>  </div></script><script type="text/x-template" id="projects">  <div id="projects">    <ul>      <li v-for="project in projects" :key="project.slug">        <router-link :to="{name: 'work', params:{ slug: project.slug}}">{{project.name}}</router-link>      </li>    </ul>  </div></script><script type="text/x-template" id="project">  <div id="project">    <h2>{{project.name}}</h2>    <p>{{project.desc}}</p>  </div></script>

Great work thus far, Austin! You're very close having this working. There are a few different ways you could parse out the correct data from your JSON file into the projectDetails component, but I'll just demo my preferred way.

First, you're going to need a bit of vanilla JS to search through your JSON file and return only the row that you want. I would do this as a method since the data isn't going to be changing or requiring the component to re-render. So, after your props, I would add something like this:

methods: {  findProject(projectName) {    return Object.values(json).find(project => project.title === projectName)  }}

Note that this is going to return the first project that matches the project name. If you have projects with the exact same project name, this won't work.

Next, you'll just need to update the default value of projectDetailsJson to call this method and pass the route's project name. Update data with something like this:

data() {  return {    projectDetailsJson: this.findProject(this.$route.params.name)  }}

If that doesn't work, we may need to set the projectDetailsJson in the created lifecycle hook, but try the above code first.

If I understood correctly, you want to keep a parent component as a layout for all of your page?

If I always understood correctly, you must use the children property of vuerouter

https://router.vuejs.org/guide/essentials/nested-routes.html

import layout from 'layout';const projectRoute = {    path: '/project',    component: Layout, // Load your layout    redirect: '/project/list',    name: 'Project',    children: [        {            path: "list", // here the path become /project/list            component: () => import('@/views/project/List'), // load your components            name: "List of project",        },        {            path: "detail/:id",            component: () => import('@/views/project/Detail'),             name: "Detail of project",        }    ],};

So you can create your layout and add everything you want, this will be available on all child components, and you can use $emit, $refs $props ect...

+

You can create an file routes/index.js and create folder routes/modules . Inside this, you can add your routes/modules/project.js and load the modules in routes/index.js

import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);import projectRoutes from "./modules/project";const routes = [    projectRoutes,    {        // other routes....     },]export default new VueRouter({    routes,    mode: 'history',    history: true,});    

@see the same doc : https://router.vuejs.org/guide/essentials/nested-routes.html

Finally, you just have to do the processing on the layout, and use the props to distribute the values ​​both in detail and in the project list; and use the filter methods described just above

I hope I have understood your request, if this is not the case, let me know,

see you

Edit: Here is a very nice architecture with vue, vuex and vuerouter. maybe inspire youhttps://github.com/tuandm/laravue/tree/master/resources/js