App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <!-- <router-link to="/about">About</router-link> -->
      <!-- <button @click="toAbout">click to about</button> -->
      <br />
      |
      <router-link :to="{ name: 'users', params: { name: 'tar' } }"
        >Tar users</router-link
      >
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  methods: {
    toAbout() {
      this.$router.push("/about");
    }
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

database.js

export default [
  {
    name: "test",
    last: "last"
  },
  {
    name: "test",
    last: "last"
  },
  {
    name: "test",
    last: "last"
  }
];

parameter.vue

<template>
  <div>
    {{ $route.params.name }}
    <div v-for="(value, index) in list" :key="index">{{ value.name }}</div>
  </div>
</template>
<script>
import database from "@/data/database";
export default {
  data() {
    return {
      list: database
    };
  },
  created() {
    console.log(database);
  }
};
</script>

router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Parameter from "./views/parameter.vue";
Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: About
    },
    {
      path: "/users/:name",
      name: "users",
      component: Parameter
    }
  ]
});