v-router两种传参以及在router-link中添加点击事件

app.vue

user.vue

user的子路由usermore

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
import UserMore from '../views/UserMore.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user/:name',
    name: 'User',
    component: User,
    children: [
      {
        path: 'usermore',
        name: 'UserMore',
        component: UserMore
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

或者

点击获取详细信息

其他传参方法参考
https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
params和query的区别，$route和$router的区别