create static page with vuejs

Question

I have a static homepage with some routes and thought about creating this with VueJs. I am totally new to this and just know NodeJs with Handlebars. So normally I would have something like this

#page {
  margin: 30px 0;
}

<div id="header">
  <a href="#">Page 1</a>
  <a href="#">Page 2</a>
  <a href="#">Page 3</a>
</div>

<div id="page">
  Current Page (depends on URL)
</div>

<div id="footer">
  Footer
</div>

And I tried to create this by using VueJs

const header = new Vue({
  el: "#header",
  methods: {
    loadPage(pageToLoad) {
      page.$data.currentPage = "Current Page: " + pageToLoad;
    }
  }
});

const page = new Vue({
  el: "#page",
  data: {
    currentPage: "Current Page: 1"
  }
});

#page {
  margin: 30px 0;
}

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="header">
  <a v-on:click="loadPage(1)">Page 1</a>
  <a v-on:click="loadPage(2)">Page 2</a>
  <a v-on:click="loadPage(3)">Page 3</a>
</div>

<div id="page">
  <span v-html="currentPage"></span>
</div>

<div id="footer">
  Footer
</div>

As you can see this example works fine. Instead of rendering the whole page I just change the "main content" of the page without reloading the header and footer.

Is this the correct way to go or how would you create a page with multiple routes?

Answer 1

This may be an incorrect assumption, but it seems like with your proposed approach, you would need to either keep the HTML for each page within the HTML for the main page in the onclick attributes for each link or else have the links contain a key that corresponds to a mapping of keys to HTML for the pages.

There are tools like Vue Router that are built for this scenario. With Vue Router you can have the HTML templates stored in separate files and imported into the router.

One other thing I noticed in your sample VueJS code is that you have a Vue object for the header and a Vue object for the page. Those could be combined into a single object for an element that contains both elements, unless you want the header to be a separate component - then defining that as a component would be useful.

//these template values can come from external files as well
const Page1 = {
  template: '<div>Page 1</div>'
}
const Page2 = {
  template: '<div>Page 2</div>'
}
const Page3 = {
  template: '<div>Page 3</div>'
}
const routes = [{
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2
  },
  {
    path: '/page3',
    component: Page3
  }
];
const router = new VueRouter({
  routes: routes
});

const viewApp = new Vue({
  el: "#app",
  router: router,
});

#page {
  margin: 30px 0;
}

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <div id="header">
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/page1">Page 1</router-link>
    <router-link to="/page2">Page 2</router-link>
    <router-link to="/page3">Page 3</router-link>
  </div>

  <div id="page">
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>

  <div id="footer">
    Footer
  </div>
</div>