[英]Routing between two components in 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 组件。 但目前它只在搜索栏中添加了正确的 url 但我没有被重定向
使用 Vue 路由器时,您不应该使用 href 制作自己的锚标记以进行导航。 要导航,您可以使用router-link 组件。
如果您想以编程方式导航,可以使用路由器上的push 方法。
你的App.vue
应该是这样的
<template>
<div id="app">
<router-view />
</div>
</template>
你的index.js
应该是这样的
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')
但最佳实践是使用外部 router/index.js 文件来声明所有路由并导入 index.js(主应用程序文件)并在声明新的 Vue 实例时使用它。
之后,您可以在代码中使用router-link
作为
<router-link to="path">
或以编程方式导航
this.$router.push({ name: AddService })
或者
this.$router.push({ path: '/' })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.