vue-router的坑，找不到Unknown custom element: <router-view>

Question

刚开始搭建vue的项目想用一下vue-router可是一只报错

下面贴出我的配置，非常的简单，
webpack的配置

const plugins = [
  // new webpack.optimize.UglifyJsPlugin({minimize: true}),
  new webpack.BannerPlugin({
    banner: '// { "framework": ' + (fileType === '.vue' ? '"Vue"' : '"Weex"') + '} \n',
    raw: true,
    exclude: 'Vue'
  })
];




const webConfig = {
  context: pathTo.join(__dirname, ''),
  // entry: entry,
  entry: {
    index: "./src/main.js"
  },
  output: {
    path: pathTo.join(__dirname, 'dist'),
    filename: '[name].web.js',
  },
  resolve: {
      extensions: ['.js', '.vue'],
      alias: {
          vue$: 'vue/dist/vue.esm.js'
      }
  },
  module: {
    // webpack 2.0 
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          query : {presets:['es2015']}
        }],
        exclude: /node_modules/
      },
      {
        test: /\.vue(\?[^?]+)?$/,
        use: [{
          loader: 'vue-loader'
        }]
      }
    ]
  },
  plugins: plugins
};

入口文件

import Vue from 'vue';
import App from './App.vue';
import routers from './Router.js'

new Vue({
    el:'#root',
    router:routers,
    template:'<App />',
    components: {App}
})

App.vue文件

<template>
    <div id="root">
        123111
        <router-view></router-view> ／／不识别这个
    </div>
</template>
<script>

export default {
  
}
</script>

Router.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

let router = new VueRouter({
    routes: [{
        path:'/',
        component:require('./index.vue')
    },{
        path:'/home',
        component:require('./home.vue')
    }]
})
export default router

最后是package。json文件

"dependencies": {
        "vue": "^2.1.8",
        "vue-router": "^2.1.1",
        "vuex": "^2.1.1",
        "vuex-router-sync": "^4.0.1",
        "weex-html5": "^0.4.1",
        "weex-vue-render": "^0.11.2"
    },
    "devDependencies": {
        "babel-core": "^6.21.0",
        "babel-loader": "^6.2.4",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-plugin-transform-runtime": "^6.9.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-runtime": "^6.9.2",
        "css-loader": "^0.26.1",
        "quick-local-ip": "^1.0.7",
        "vue-loader": "^10.0.2",
        "vue-template-compiler": "^2.1.8",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.2",
        "weex-builder": "^0.2.6",
        "weex-loader": "^0.4.1"
    },

百度了很多的办法都没能解除这个问题，请教各位路过的大神。

Answer 1

把Vue.use(VueRouter);移到入口文件的最上面吧，如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routers from './Router.js'

Vue.use(VueRouter)

new Vue({
    el:'#root',
    router:routers,
    template:'<App />',
    components: {App}
})

Answer 2

看着是weex，不是单纯的vue，可以把new Vue 改成这样试试：
new Vue(Vue.util.extend({ el: '#root', router}, App));

Answer 3

Unknown custom element: <router-view>，这个报错网上答案有很多，解决办法
第一：
import VueRouter from 'vue-router';
import routers from './Router.js'
Vue.use(VueRouter)//这里要注册
new Vue({

el:'#root',
router:routers,
template:'<App />',
components: {App}

})
如果首页不适用Vue.use(VueRouter)，在路由文件里面
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({

https://www.zhoulujun.cn/html...

Answer 4

刚刚我也遇到了同样的问题。我在加入Vue.use(VueRouter)后就可以了。

import App from  './App.vue';

//我觉得出现这样的问题很有可能是下面这两行没有写全造成的
import VueRouter from  'vue-router';
Vue.use(VueRouter)

Answer 5

楼主问题解决了吗？ 我也遇到一样的问题