为分页面路由上加userId

配置路由相关信息app.vue

 <router-link to="/home" tag="button" router-link-active>home</router-link>
    <router-link to="/about" tag="button">about</router-link>
    <router-link v-bind:to="'/user/'+userId" tag="button">user</router-link>
    <router-view></router-view>
    

在router/index.js下相关配置

//配置路由相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'


import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)
//2.创建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',
})
//3.将router对象传入到实例
export default router

在userId加具体ID的页面user.vue

<template>
    <div>
        <h2>user</h2>
        <p>user,user</p>
        <p>{{userId}}</p>
        <p>{{$route.params.userId}}</p>
    </div>
</template>

<script>
    export default {
        name: "User",
        computed: {
            userId() {
                return this.$route.params.userId
            }
        }
    }
</script>