vue根据参数跳转路由

vue根据参数跳转路由

目录结构

App.vue

<template>
  <div id="app">
      <router-link :to="'/user/'+userId" tag="button">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'App',
    methods:{
    },
      data(){
        return{
            userId:'lisi'
        }
      }

  }
</script>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from "../views/User.vue";

Vue.use(VueRouter) //vue.use安装router插件

const routes = [
  {
    path: '',
    redirect:'home'  //重定向
  },
  {
    path: '/user/:userId',
    name: 'User',
    component: User
  }
]

const router = new VueRouter({
  routes,
  mode:'history',  //去掉url的 # 字符
  linkActiveClass:'active'
})

export default router