vue router无法加载router-view视图

Question

主页面进行这样子的编写用的是

<template>
  <div class="hello">
    
    <router-link to="/home">  
      <el-button>按钮</el-button>
      <router-view></router-view>
    </router-link>
    <router-link to="/user">  
      <el-button type="primary">主要按钮</el-button>  
    </router-link>
    <router-view></router-view>
    <el-radio v-model="radio" label="1">备选项</el-radio>
  </div>
</template>

这是router的index.js配置文件

```javascript

import Vue from 'vue';
import VueRouter from 'vue-router';
//import Home from'../views/Home.vue'

Vue.use(VueRouter)//全局引入

const routes = [  //传输路由的相关信息
    {
        path: '/',    //路径
        name: 'Home', //函数式编程的时候使用
        compoment: () => import('../views/Home.vue') //按需引入路径位置
    },
    {
        path:'/user',
        name:'User',
        compoment: () => import('../views/User.vue') 
    }
]

const router =new VueRouter({  //声明变量router用于接受router实例
    mode: 'history' , //路由的匹配模式
    routes      //传入router
})

export default router       //传出router

这是main.js

import Vue from 'vue'
import App from './App.vue'
//import ElementUI from 'element-ui'; //全局引入
//按需引入-对全局引入的改写
import {Button ,Radio} from 'element-ui';//按需引用button和radio
import 'element-ui/lib/theme-chalk/index.css';  //引入element的样式文件
import router from '../router'   //引用router

Vue.config.productionTip = false

//Vue.use(ElementUI) //全局引入
Vue.use(Button)
Vue.use(Radio)

new Vue({
  router,   //配置
  render: h => h(App),
}).$mount('#app')

这是Home.vue

```html
<template>
    <div>我是Home页面</div>
</template>

<script>
export default{
    name: 'Home',
    data(){
        return{}
    }
}
</script>

这是User.vue

```html
<template>
    <div>我是User页面</div>
</template>

<script>
export default{
    name: 'User',
    data(){
        return{}
    }
}
</script>

```

Answer 1

要实现vue router加载router-view视图，需要在main.js中引入router，并在new Vue中配置router，在router的index.js中配置路由，并在App.vue中使用router-view标签，在Home.vue和User.vue中编写视图内容。