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

我在尝试从一个组件重定向到另一个组件时遇到了问题。它似乎没有路由到我的路由器中指定的URL到所需的组件，而是停留在我的主页上。我想不出哪里出了差错

我正在使用Vue CLI版本3。
下面是我的index.js、Home.vue和Model.vue

然后在这下面是Home.vue的图像，它显示了当我尝试重定向到href标签中的链接时发生的情况。
您可以看到，它不会进入其他组件，而是停留在我的主页上

你知道是什么导致了这个问题吗？谢谢

/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 
    }
  ]
})  

<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>

<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>

/components/Home.vue

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 
    }
  ]
})  

<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>

<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>

{{msg}}


资料

var axios=需要（“axios”）；
导出默认值{
姓名：'家'，
数据（）{
返回{
msg:“欢迎使用您的Vue.js应用程序”，
标签：[]
}
},
挂载：函数（）{
var url='1〕http://10.0.0.5:5000';
console.log（url）
get（url+'/'））
。然后（（响应）=>{
console.log（response.data）；
this.tags=[{“model_tag_name”：response.data}]；
})
.catch（函数（错误）{
console.log（错误）；
});
},
}
h1，h2{
字体大小：正常；
}
a{
颜色：#42b983；
}

/components/Model.vue

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 
    }
  ]
})  

<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>

<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>

模型
var axios=需要（“axios”）；
导出默认值{
名称：'模型'，
数据（）{
返回{
model_tag_name：此.$route.params.model_tag_name
}
}
}
h1，h2{
字体大小：正常；
}
a{
颜色：#42b983；
}

这就是我单击主页上的href链接时发生的情况。即使URL与Model.vue的routerview匹配，它也会重定向回主页

---

请在/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>

{{tag.model_tag_name}

请在/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>

{{tag.model_tag_name}