在Vue Router上导入同名组件的方法如下:
components
的文件夹,用于存放同名组件。components
文件夹中,创建一个与路由路径相对应的同名组件文件,例如,如果你的路由路径是/home
,那么创建一个名为Home.vue
的文件。router.js
),导入Vue和Vue Router,并使用import
语句导入同名组件。例如:import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
}
]
})
在上面的代码中,我们使用import
语句导入了Home.vue
组件,并在路由配置中将其作为/home
路径的组件。
<router-link>
和<router-view>
标签来导航到和展示同名组件了。例如,在一个名为App.vue
的组件中,你可以使用以下代码导航到Home.vue
组件:<template>
<div>
<router-link to="/home">Go to Home</router-link>
<router-view></router-view>
</div>
</template>
在上面的代码中,<router-link>
标签用于导航到/home
路径,<router-view>
标签用于展示对应的组件。
这样,你就成功地在Vue Router上导入了同名组件。当你导航到对应的路径时,Vue Router会自动加载并渲染该组件。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据项目需求和实际情况进行。
领取专属 10元无门槛券
手把手带您无忧上云