[Vuejs]-Router link in v-if is working but url does not change

by

0👍

✅

I set up an example routing implementation. A couple of components with a router configuration.

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Home from '@/components/stackoverflow/router-params-example/Home'
import ProductAll from '@/components/stackoverflow/router-params-example/ProductAll'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/productall/:id',
    name: 'productall',
    component: ProductAll,
    props: true
  }
]

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

App.vue

<template>
  <div id="app" class="container">
    <router-view></router-view>
  </div>
</template>

Home.vue

<template>
  <div class="parent">
    <h4>Home</h4>
    <div class="row">
      <div class="col-md-6">
        <router-link class="btn btn-primary" :to="{ name: 'productall', params: { id: productId } }">Product All</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        productId: '603aaaf5dead94fee94d2811'
      }
    }
  }
</script>

ProductAll.vue

<template>
  <div class="product-all">
    <h4>Product All</h4>
    <div class="row">
      <div class="col-md-6">
        <router-link class="btn btn-secondary" :to="{ name: 'home' }">Back</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      id: {
        type: String,
        required: true
      }
    }
  }
</script>

Leave a comment