vue-router应用于组件内时的矛盾怎么解决

发布网友 发布时间：2022-04-22 03:44

我来回答

共3个回答

热心网友 时间：2022-04-21 20:30

先是入口点 main.js
import App from './components/App.vue'
router.start(App, '#app')
然后在App.vue 也就是根组件里面声明router-view
<router-view      class="view"      keep-alive      transition      transition-mode="out-in">    </router-view>

热心网友 时间：2022-04-21 21:48

　　我使用的是vue-cli构建的项目，它结合了webpack可以很方便地使用.vue的单文件组件，非常方便，现在想使用vue-router来做前端路由及组件切换，目前是在html中引用了入口js，入口js的用途是引用根组件App.vue，我希望在App.vue里面使用vue-router，于是在App.vue文件的template标签内加入了<router-view></router-view>，template标签内容如下：
　　<template>
　　<div id="app">
　　<div class="main">
　　<router-view></router-view>
　　</div>
　　</div>
　　</template>
　　遇到的问题是：
　　1、如果在App.vue组件ready之前使用Vue.use(VueRouter)，在ready后使用router.start(App_body, '#app')，那么会报错“[vue-router] <router-view> can only be used inside a router-enabled app.”我猜测是因为App.vue组件并未编译完成，自然在template里面的<router-view></router-view>就找不到了，所以在ready之前注册vue-router报这个错。
　　2、如果在组件ready后使用Vue.use(VueRouter)和router.start(App_body, '#app')，那么会报错“[Vue warn]: Unknown custom element: <router-view> – did you register the component correctlyhttp://www.toprealgroup.com/web/? For recursive components, make sure to provide the "name" option.”我猜测是因为App.vue组件ready之前，发现template中有<router-view></router-view>组件，而这个组件还没有被注册

热心网友 时间：2022-04-21 23:22

先是入口点 main.js
import App from './components/App.vue'
router.start(App, '#app')
然后在App.vue 也就是根组件里面声明router-view
<router-view class="view" keep-alive transition transition-mode="out-in"> </router-view>