关于vue 路由的使用，以及点击左边菜单，显示对应的内容

第一次使用路由，总有意想不到错误和突发情况，今天就说说初次使用vue路由的情况
路由安装，
这个你可以在安装vue项目时选择，这个 我就不用多说了，还有一种是通过npm下载

npm install vue-router --save

下载成功后，你的项目会出现这个文件

点击index.js进入开始配置你的路由
![在这里插入图片描述](https://img-blog.csdnimg.cn/202103271940446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODI5NDYx,size_16,color_FFFFFF,t_70#pic_center
然后main.js挂载

这些都是需要写入的，然后选择一个父组件，写一个点击跳转事情，我用的是编程跳转

 userbtn(){
      console.log("开始调制");
      this.$router.push('/Home');
    }

这只是其中的一个，还有很多网上也有，接下来要说的就是点击左边菜单，右边路由显示
你需要在一个父组件的路由下来嵌套路由

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home,
      children: [{
        path: '/iviw/Result',
        name:'Result',
        component: Result,
        hidden: true
      },{
        path: '/iviw/Test',
        name:'Test',
        component: Test,
        hidden: true
      }
      ],
    },


  ]
})

然后再路由配置里面引入子组件，上面截图已经有显示了。可以去看看。
然后再菜单要点击标签里面这样写入，注意那个index = ''要和事件的实参一样

 <el-menu-item-group>
            <el-menu-item index="/iviw/Result" @click="router('/iviw/Result')">数据数据</el-menu-item>
            <el-menu-item index="/iviw/Test" @click="datas('/iviw/Test')">人员数据</el-menu-item>
          </el-menu-item-group>

最后是事件发生

router(path){
        this.$router.push(path)
    },
    datas(path){
      this.$router.replace(path);
    }

这样就可以成功了
但是控制器会出现

需要再路由配置里面写入，放在那里都可以

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

这样就解决了，最后把#去掉还是再路由配置里面，加一个 mode:“history”,

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home,
      children: [{
        path: '/iviw/Result',
        name:'Result',
        component: Result,
        hidden: true
      },{
        path: '/iviw/Test',
        name:'Test',
        component: Test,
        hidden: true
      }
      ],
    },


  ]
})

过程就是这样，还有好多不足的地方。