vue-router example for queries

Example showing how to keep up to date with query values

by fizerkhan

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div><router-link to="/">/Dashboard</router-link></div> 
<div><router-link to="/projects">/projects</router-link></div> 
<div><router-link to="/projects/1">/projects/:id</router-link></div> 
<div><router-link to="/projects/1/deals">/projects/:projectId/deals</router-link></div>
<div><router-link to="/projects/1/deals/1/details">/projects/:projectId/deals/:dealId/details</router-link></div>`
<div><router-link to="/projects/1/deals/1/commitments/1/edit">/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit</router-link></div>
  <router-view></router-view>
</div>

Babel + JSX

const Dashboard = { template: '<div>Dashboard</div>' }
const Projects = { template: '<div>Projects</div>' }
const ProjectDetails = { template: '<div>ProjectDetails : <router-view></router-view></div>' }
const Deals = { template: '<div>Deals</div>' }
const DealDetails = { template: '<div>DealDetails</div>' }
const CommitmentEdit = { template: '<div>CommitmentEdit</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
  {
    path: '/',
    component: Dashboard
  },
  {
    path: '/projects',
    component: Projects
  },
  {
    path: '/projects/:id',
    component: ProjectDetails,
    children : [
      // DEALS
      {
        path: 'deals/:dealId/details',
        component: DealDetails
      },
      {
        path: 'deals',
        component: Deals
      },
      // COMMITMENTS
      {
        path: 'deals/:dealId/commitments/:commitmentId/edit/',
        component: CommitmentEdit
      }
    ]
  }
]
})

new Vue({
	router,
  el: '#app'
})