Vue Router动态路由使用方法总结

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const About = () => import('../views/About.vue');
const routes = [
  {
    path: '/about/:info',
    component: About
  }
];
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});
export default router;

<template>
  <div>
    <!-- 通过router-link动态路由传参 -->
    <router-link :to="'/about/'+info">About</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      info: 'hello vuejs'
    }
  }
}
</script>
<style>
.active {
  color: #1890ff;
}
</style>

<template>
  <div>
    <h2>About</h2>
    <!-- 可以通过($route.params.动态传参)获取数据 -->
    <p>{{ $route.params.info }}</p>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>
<style>
</style>

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const User = () => import('../views/User.vue');
const routes = [
  {
    path: '/user/:userId',
    component: User
  }
];
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});
export default router;

<template>
  <div>
    <!-- 通过普通button动态路由传参 -->
    <button @click="userClick">用户</button>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan'
    }
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId);
    }
  }
}
</script>
<style>
.active {
  color: #1890ff;
}
</style>

<template>
  <div>
    <h2>User</h2>
    <p>{{ $route.params.userId }}</p>
  </div>
</template>
<script>
export default {
  name: 'User'
}
</script>
<style>
</style>