Vue/Vuecli3 - 如何使用参数从一个组件路由到另一个组件

Question

I'm running into an issue when trying to redirect from one component to another. It appears that it's not routing to the URL thats specified in my router to the desired component and is staying on my home page instead. I can't figure out where the error is occuring.

I'm using the Vue CLI version 3.
Below is my index.js, Home.vue and Model.vue

Then under that is images of the Home.vue then it shows what happens when I try to redirect to the link in my href tag.
You can see that it's not going to the other component and it's staying on my home page.

Any ideas on whats causing the issue here? Thanks!

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Homefrom '@/components/Home'
import Model from '@/components/Model'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/model/:model_tag_name',
      name: 'Model',
      component: Model
      // props: true 
    }
  ]
})  

/components/Home.vue

<template>
  <div class="hello container-fluid">
    <h1>{{msg}}</h1>
    <div class="row">
      <div class="col-4 text-left">
        <ol>
          <li v-for="tag in tags" v-bind:key="tag.model_tag_name">
            <a :href="'/model/'+ tag.model_tag_name"> {{tag.model_tag_name}}</a>
          </li>
        </ol>
      </div>
      <div class="col-8">
        <p>Data</p>
      </div>
    </div>
  </div>

</template>

<script>
var axios = require('axios');

export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tags: []
    }
  },
  mounted: function() {
    var url = 'http://10.0.0.5:5000';
    console.log(url)
    axios.get(url + '/')
      .then((response) => {
        console.log(response.data);
        this.tags = [{"model_tag_name": response.data}];
      })
      .catch(function(error) {
        console.log(error);
      });
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

a {
  color: #42b983;
}
</style>

/components/Model.vue

<template>
  <div class="container-fluid">
    <h1> Model </h1>
  </div>

</template>

<script>
var axios = require('axios');

export default {
  name: 'Model',
  data () {
    return {
      model_tag_name: this.$route.params.model_tag_name
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

a {
  color: #42b983;
}
</style>

http://localhost:8080/

Then this is what happenes when I click the href link on the home page. It's redirecting back to the home page even though the URL matches the routerview for Model.vue

Answer 1

Pleas update this code in /components/Home.vue

   <li v-for="tag in tags" v-bind:key="tag.model_tag_name">
<router-link :to="{ name: 'Model', params: { model_tag_name: tag.model_tag_name}}"> 
 {{tag.model_tag_name}}</router-link>
   </li>