app.vue

<template><div id="app"><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-link v-bind:to="'/user/'+userId">用户</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App',data(){return{userId:'userId'}},methods:{}
}
</script><style></style>

 about.vue

<template>
<div>
<h2>
我是about
</h2>
<p>我是首页内容</p>
</div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

User.vue

<template>
<div>
<h2>
我是user
</h2>
<p>我是首页内容</p>
<h2>{{userId}}</h2>
</div>
</template><script>
export default{name:"User",computed:{userId(){return this.$route.params.userId.abc}}
}
</script><style scoped></style>

index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, {path: '/home',component: Home},{path: '/about',component: About},{path: '/user/:userId',component: User},]//安装插件
const router = new VueRouter({//配置之间的关系routes,mode: 'history',linkActiveClass: 'active'
})export default router

运行结果