[Vuejs]-Multiple adress parameters in single page application

by

0👍

It appears that you want to use dynamic segments in your route, where the data in the route is passed along as data to your component. You can take a look at the Vue Router documentation for dynamic route matching here.

In short, you need to redefine your route:

let router = new VueRouter({
  routes: [
  // other routes
  {
    component: Two,
    path: '/two/:first/:second'
  }, 
]})

Note that :first and :second can be anything you’d like. It could just as easily be:

  {
    component: Two,
    path: '/two/:zebra/:canteloupe'
  },

However you choose to name those dynamic route segments, Vue router will pass them along as params to your identified component, which in this case is the Two component.

So, in your Two template, you could do something like…

<template>
  <div>
    {{$route.params.first}}{{$route.params.second}}
  <div>
<template>

Leave a comment