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

Posted 2023-05-04

先是入口点 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>

参考技术A 　　我使用的是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>组件，而这个组件还没有被注册 参考技术B 先是入口点 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>本回答被提问者采纳

iview组件怎么和vue-router结合

参考技术A <template>
<Page :current="1" :total="100"></Page>
</template>
<script>
import Page from 'iview';
export default
components: Page

</script>本回答被提问者采纳 参考技术B 不知道你有没有用过iview-admin，已集成vue-router模块，如果没有集成就需要npm安装一下：
npm install vue-router --save-dev
----------------------------- 一条分割线 ---------------------------------------
在iview-admin项目中打开index.js可以看到
import VueRouter from 'vue-router'; //引入vue-router模块
Vue.use(VueRouter); //使用VueRouter
//配置路由
const RouterConfig =
// mode: 'history', //开启mode="history"模式，需要服务端的支持
routes: routers
;
其他路由支持请参考vue.js和iview官网