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>

---

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

当使用Vue router时，您不应该使用hrefs制作自己的定位标记以进行导航。要导航，可以使用

---

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

您的

App.vue

应该如下所示

<template>
    <div id="app">
        <router-view />
    </div>
</template>

import Vue from 'vue'
import App from '@/App.vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import AddService from '@/components/AddService'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/add-service',
        name: 'Add Service',
        component: AddService
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})


new Vue({
    el: '#app',
    router,
    render: h => h(App)
}).$mount('#app')

但最佳做法是使用外部路由器/index.js文件来声明所有路由，并导入index.js（主应用程序文件），并在声明新的Vue实例时使用它

之后，您可以在代码中设置

路由器链接

<router-link to="path">

或

---

请你把密码告诉我好吗

this.$router.push({ name: AddService })

this.$router.push({ path: '/' })