时间戳

首页 > 解决方案 > Vue.js 中两个组件之间的路由

javascript - Vue.js 中两个组件之间的路由

问题描述

好吧，这是我的App.vue：

    <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Home/>
    <AddService/>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
         {
            path: '/addService',
            name: 'addService',
            component: AddService
        }
    ]
});
        
Vue.use(router)


export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

我想在 Home 和 AddService 组件之间进行路由。我的主页有一个链接，基本上是这样的： <a href="../addService">Add a new Service</a>

如果我点击这个链接，我应该会被重定向到 AddService 组件。但目前它只在搜索栏中添加了正确的网址，但我没有被重定向

标签： javascriptvue.jsvue-router

解决方案

使用 Vue 路由器时，您不应该使用 href 制作自己的锚标记以进行导航。要导航，您可以使用router-link 组件。

如果您想以编程方式导航，可以使用路由器上的push 方法。

推荐阅读