简单例子

1.前端传递参数
​ 此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

个人信息
2.修改路由配置，增加props：true属性

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
Vue.use(VueRouter);
export default new VueRouter({
  routes:[{
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path:'/main',
      name:'main',
      component:Main,
      //路由嵌套
      children:[
        { path: '/user/profile/:id',
          component: UserProfile,
          name: 'UserProfile',
          props:true},
        {path: '/user/list',component: UserList}
      ]
    }
  ]
});

3.前端显示
在要展示的组件Profile.vue中接收参数

<template>
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>
</template>

<script>
    export default {
        props: ['id'],
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

运行程序

重定向

添加一个配置信息

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
Vue.use(VueRouter);
export default new VueRouter({
  routes:[{
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path:'/main',
      name:'main',
      component:Main,
      //路由嵌套
      children:[
        { path: '/user/profile/:id',
          component: UserProfile,
          name: 'UserProfile',
          props:true},
        {
          path: '/user/list',component: UserList
        },
        {
          path:'/goHome',
          redirect:'/main'
        }
      ]
    }
  ]
});

添加片段

<el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>

点击即可回到main