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

app.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user/李大娘?age=20">User</router-link>
    </div>
    <router-view/>
  </div>
</template>

user.vue

<template>
  <div class="about">
    <!-- 两种传参的方法 -->
    <div v-if="item">
      <h1><span @click="show">你好，</span>{{ $route.params.name }}</h1>
      <h2>你今年 {{ $route.query.age }} 岁了</h2>
    </div>  
    

    <!-- 两种写法 -->
    <!-- <router-link :to="'/user/' + $route.params.name +'/usermore'">您的更多信息</router-link> -->
    <router-link @click.native="show" v-if="item" to="usermore" append>您的更多信息</router-link>


    <router-view ></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: true
    }
  },
  methods: {
    show(){
      this.item = !this.item
    }
  }
}
</script>

user的子路由usermore

<template>
  <div class="about">
    <!-- 两种传参的方法 -->
    <h1>用户 {{ $route.params.name }} 的详细信息</h1>
    <p>111111</p>
  </div>
</template>

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