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

Question

尝试从一个组件重定向到另一个组件时遇到问题。它似乎没有路由到我的路由器中指定的 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 

    }

  ]

})  

/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 中更新此代码&nbsp; &nbsp;<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}}">&nbsp;&nbsp;{{tag.model_tag_name}}</router-link>&nbsp; &nbsp;</li>