Question 173289 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why vue-router is toggling only the url but not the view component

While clicking the nav link vue-router is toggling only the url but not the view component, even though I don’t seem to have any error. The console shows that only the Home component is at the view, but hot the Not main component after clciking the second nav link.

https://stackblitz.com/edit/vue-fsg2l2?file=src%2Fcomponents%2FHeader.vue,src%2Frouter%2Findex.js,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2Fcomponents%2FMain.vue

// router index.js

import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/shops',
      name: 'Shops',
      component: Shops,
    },
  ],
});

export default router;


// Home view

<template>
  <div class="wrapper">
    <Header />
    <Main />
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import Main from '../components/Main.vue';

export default {
  name: 'Home',
  components: {
    Header,
    Footer,
    Main,
  },
};
</script>

<style lang="scss" scoped></style>


// anoteher view

<template>
  <div class="wrapper">
    <NotMain />
  </div>
</template>

<script>
import NotMain from '../components/NotMain.vue';

export default {
  name: 'Shops',
  components: {
    NotMain,
  },
};
</script>

<style lang="scss" scoped></style>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    not specified at app.js That made the trick. I needed to post the inside the app.js main component


  2. 0

    In your app.vue only router-view part of template will change on change of route, rest all will display on every route. As checked on the stackBlitz your routes are working as expected and view changes are reflecting already.

    <template>
  <div id="app">
    <Header />
    <router-view></router-view>
    <Footer />
  </div>
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search