Akryum / vue-router-multi-view

router-view meet v-show meet keep-alive
https://akryum.github.io/vue-router-multi-view/
86 stars 9 forks source link

How can I have multi-views for a paremeterized url ? #4

Open oreliain opened 6 years ago

oreliain commented 6 years ago

Hi, Thank you for this great vue router library.

I'm trying to realize a dynamic navigation. Here is my vue template :

<template>
    <div id="app">
        <router-link v-for="(item, index) in items" :key="index" class="link" :to="{ name: routeName, params: { [paramField]: item.urlParamValue}}">{{item.label}}</router-link>
        <br>
        <router-multi-view></router-multi-view>
    </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      routeName: "ParamRoute",
      paramField: "urlParam",
      items: [
         {
        urlParamValue: "FIRST",
        label: "First section"
     },
    {
       urlParamValue: "SECOND",
       label: "Second section"
    }
      ]
    }
  }
}
</script>

My router definition :

export default new Router({
  mode: "history",

  routes: [
    {
      path: "/",
      redirect: { name: "ParamRoute" }
    },
    {
      name: "ParamRoute",
      path: "/:urlParam",
      component: Hello,
      props: route => ({ name: route.params.urlParam })
    }
  ]
});

As a result, I do not obtain multiple views for the route "ParamRoute". The behaviour is the same as with classical tag <router-view>. I note that my "router-link v-for" navigates to the same named route but routes /FIRST and /SECOND have not the same views.

I have an example at Vue Multi Routing Example

Did I miss something or what am I trying to achieve is impossible ?

Many thanks for considering my request.