using vue-router to redirect to different pages

Question

I have a vue application which dose simple inserts and i am trying to use vue router to redirect to different pages for example when i load /postComponent and /userComponent they will be on separate pages not all in one page when loading the localhost:8080

app.js

<template>
  <div id="app">

    <router-link to="/postcomponent">post</router-link>
    <router-link to="/usercomponent">user</router-link>
    <router-view/>



  </div>
</template>

<script>

import PostComponent from './components/postComponent';
import userComponent from './components/userComponent';


export default {
  name: 'app',
  components: {
   PostComponent,
    userComponent
  }
};
</script>

routes.js

import Vue from 'vue'
import App from '/client/src/App'
import VueRouter from 'vue-router'
import postComponent from '/client/src/components/postComponent';
import userComponent from '/client/src/components/userComponent';


vue.use(VueRouter);

Vue.config.productionTip = false

const routes = [
    {
        path: '/postcomponent',
        name: 'postcomp',
        component: postComponent
    },
    {
        path: '/usercomponent',
        name: 'usercomp',
        component: userComponent
    },
];

new Vue({
    routes,
    render: h => h(App),
}).$mount('#app')

postComponent

<script>
import postService from '../postService';

export default {
  name: 'postComponent',
  data() {
    return {
      posts: [],
      error: '',
      topic: '',
      price: '',
      location: '',
      provider: ''




    }
  },

index.js

const  express  = require ('express');
const  bodyparser  = require ('body-parser');
const  cors  = require ('cors');

const  app = express();

app.use(bodyparser.json());
app.use(cors());
const posts = require('./api/posts');
const users = require('./api/users');

app.use('/api/posts', posts);
app.use('/api/users', users);

const  port = process.env.port || 500;


app.listen(port, () => console.log(`Server started on port ${port}`));

im getting the following error https://i.sstatic.net/42Ka3.png

Answer 1

UPDATE ** : App.vue :

    <template>
      <div id="app">
         <router-link to="/postcomponent">post</router-link>
         <router-link to="/usercomponent">user</router-link>
         <router-view/>
      </div>
    </template>

Inside Routes.js import statements and paths :

import PostComponent from "@/components/PostComponent";
import UserComponent from "@/components/UserComponent";

const routes = [
  {
    path: '/postcomponent',
    name: 'postcomp',
    component: PostComponent
  },
  {
    path: '/usercomponent',
    name: 'usercomp',
    component: UserComponent
  },
];

PostComponent :

<template>
  Post Comp
</template>

<script>
   export default {
      name: "PostComponent"
   }
 </script>

User Comp :

<template>
  User Comp
</template>

<script>
   export default {
      name: "PostComponent"
   }
 </script>

UPDATE * : remove those unnecessary imports on app file

I think its better to first have a look at Vue-router at https://router.vuejs.org/

SPA stands for Single Page Application means that all of your components eventually will execute on a single *.html file. this means that in SPA, you cant just redirect your client to another url and perform another HTTP request and still be on the same Vue SPA!. because then you will probably get new html/css and javascript files to execute and render.all you can do is 1.use vue router to specify on which path, what component should render. when you describe your router using VueRouter thats exactly what you are going to do!, config your router and tells him on which path, what component you should render.

there is no way that you can redirect your client to another domain and still be on the same SPA and loads your components BUT ! as i can see in your codes there is a way to achieve what you want. there are some problems in your code but i'll show you how you can config two routes to achieve something like that. i assume that you have those two components postComponent and userComponent ready. first we have to import those in our routes.js :

import postComponent from 'PATH_TO_COMP';
import userComponent from 'PATH_TO_COMP';

note that you can use '@' as an alias for /src in your directory

first we have to specify two routes, for /postcomponent and /usercomponent, we doing it by adding two objects to routes array in VueRouter, we can specify a name for our routes and we must specify a component which will render on that router,

routes : [
 {path : "/postcomponent", name :"postComp", component:postComponent},
 {path : "/usercomponent", name :"userComp", component:userComponent}
]

so now we have to implement our app file to say that where we want this components to render, we use empty <router-view/> tag to show that,

now everything is set, you can switch between routes using <router-link> tag like below :

<router-link to="/postcomponent" >Show me post component :)</router-link>

and you will see that when you go to http://localhost:8080/postcomponent your postComponent will render and sits on your <router-view/> !