User jumps to details

//这是用户管理页面
<template>
  <div>
    <!-- 标题 -->
    <h4 class="text-center">用户管理</h4>

    <!-- 用户列表 -->
    <table class="table table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>头衔</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for=" item in userlist" :key="item.id">
          <td>{
   
   { item.id }}</td>
          <td>{
   
   { item.name }}</td>
          <td>{
   
   { item.age }}</td>
          <td>{
   
   { item.position }}</td>
          <td>
            <a href="javascript:;" @click.prevent="gotoDetail(item.id)">详情</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MyUser',
  data() {
    return {
      // 用户列表数据
      userlist: [
        { id: 1, name: '嬴政', age: 18, position: '始皇帝' },
        { id: 2, name: '李斯', age: 35, position: '丞相' },
        { id: 3, name: '吕不韦', age: 50, position: '商人' },
        { id: 4, name: '赵姬', age: 48, position: '王太后' }
      ]
    }
  },
  methods:{
    gotoDetail(id){
      this.$router.push('/home/userinfo/'+ id)
      // console.log(id);
    }
  } 
}
</script>

<style lang="less" scoped></style>

//用户详情页
<template>
  <div>
    <button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
    <!-- <h4 class="text-center">用户详情 --- {
   
   { this.$route.params.id}}</h4> -->
    <h4 class="text-center">用户详情 --- {
   
   {id}}</h4>
  </div>
</template>

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

<style lang="less" scoped></style>

//router
import Vue from "vue";
import VueRouter from 'vue-router';
import Login from '../components/MyLogin';
import Home from '../components/MyHome';
import Users from '../components//menus/MyUsers'
import Rights from '../components//menus/MyRights'
import Goods from '../components//menus/MyGoods'
import Orders from '../components//menus/MyOrders'
import Settings from '../components//menus/MySettings'
import MyUserDetail from '../components/user/MyUserDetail'


Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
        {
            path: '/home', component: Home, 
            redirect: '/home/users',children: [
                { path: 'users', component: Users },
                { path: 'rights', component: Rights },
                { path: 'goods', component: Goods },
                { path: 'orders', component: Orders },
                { path: 'settings', component: Settings },
                { path: 'userinfo/:id', component: MyUserDetail, props: true },
            ]
        },
    ]
})

router.beforeEach(function (to, from, next) {
    const pathArr = [ '/home/users','/home/rights']
    if ( pathArr.indexOf( to.path ) !== -1 ) {
        if (token) {
            const token = localStorage.getItem('token')
            next()
        } else {
            next('/login')
        }
    } else {
        next()
    }
})

export default router