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

Question

尝试从一个组件重定向到另一个组件时遇到问题。它似乎没有路由到我的路由器中指定的 URL 到所需的组件，而是停留在我的主页上。我无法弄清楚错误发生在哪里。我正在使用 Vue CLI 版本 3。下面是我的 index.js、Home.vue 和 Model.vue然后在那下面是 Home.vue 的图像，然后它显示了当我尝试重定向到我的 href 标记中的链接时会发生什么。您可以看到它不会转到其他组件，而是停留在我的主页上。关于是什么导致这里问题的任何想法？谢谢！/router/index.jsimport 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>

Answer 1

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