Proper approach to showing subviews using Vue

Issue

I'm new to Vue and trying to observe the paradigm of it, I checked the page, did the examples and compared to Angular, MVC etc. that I'm substantially convenient with.

My scenario is as follows. There's a navbar on the static landing index.html page. Below it, there a div tagged for my view application called #vapp. As the user clicks on the different menus, I want the div vapp to be repopulated with:

1. the HTML code for that certain view,
2. data that's going be used in the table(s) and lists in it.

My approach would be to change the value of vapp.data to correspond to the one needed in the view (making that field my viewmodel, kind of). However, I'm a bit stuck on the routing part. Should I render the HTML to be Vue'd in the click event?

Perhaps I'm influenced by Angular but spontaneously I'd like to see a template in a separate HTML file that is piped (pushed, rendered - whatever the right naming is) into a part of my vapp div while at the same time letting it be able to access (and preferably be bound to) the data provided in the data field of the Vue object.

Is that the appropriate approach? Or is the paradigm behind Vue to create and maintain a new Vue object for each "page" being rendered?

Solution

I've never used angular but in Vue you can implement an SPA by using single file components and vue-router.

The approach is to have one page that serves all your components, and each component itself can be made up of multiple components. So firstly you set up a router like so:

// import top level components
import Foo from './foo.js'
import Bar from './bar.js'

// Define routes, each route serves up a component
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// Create a router
const router = new VueRouter({
  routes
})

// Mount it to your div
const app = new Vue({
  router
}).$mount('#app')

In your HTML you then do:

<div id="app">
  <!-- links you registered earlier -->
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
   <!-- All content will be served up here -->
  <router-view></router-view>
</div>

Now vue will serve up Foo and Bar when those links are clicked.

As for serving up data, each component in a single file component is self contained, so you put the template, style and view model (data) relating to that component in one file:

<template>
  <div>
  {{message}}
  <my-component></my-component>
</div>

</template>

<script>
  // import components to be used in this component
  import myComponent from './myComponent'

  export default{
     // register imported components
     components: {
       myComponent
     },
     data(){
       return {
         message: 'Foo'
       }
     }
  }
</script>

These need to be compiled with something like webpack or browserify.

Essentially in the end you have a bunch of self contained components being served up by the router as the user navigates, and each component contains all the components it needs to function.

Answered By - craig_h