Vue-Router 动态路由

某个模式下匹配到的所有路由，都映射到同一组件User。

by logan70

HTML

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<div id="app">
  <h1>Vue-Router 动态路由</h1>
  <input type="text" v-model="userId">
  <button @click="$router.push(`/user/${userId}`)">查询用户</button>
  <p>
    <!-- 路由导航，to属性决定导航地址 -->
    <!-- router-link编译后默认渲染为a标签 -->
    <router-link to="/user/1">1号用户</router-link>
    <router-link to="/user/2">2号用户</router-link>
  </p>
  <!-- 路由渲染出口 -->
  <router-view></router-view>
</div>

JavaScript

const User = {
	template: '<div><p>这是User组件。</p><p>用户ID：{{$route.params.id}}</p><p v-html="msg"></p></div>',
  data() {
  	return {
    	nameDB: {
      	1: '乌木喂喂威 恩耶吞温威 乌温穆补 欧萨斯',
        2: '布里秋秋 迪不利多'
      },
      msg: ''
    }
  },
  // 路由独享的导航守卫
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`，通过传回调给 next并把组件实例作为回调方法的参数来访问组件实例
    next(vm => {
      vm.getUserName(to.params.id)
      vm.msg += '<br/>路由进入前（beforeRouteEnter）触发'
    })
  },
  // 路由独享的导航守卫
  beforeRouteUpdate(to, from, next) {
  	// 在当前路由改变，但是该组件被复用时调用
  	this.getUserName(to.params.id)
  	this.msg += '<br/>路由更新前（beforeRouteUpdate）触发'
    next()
  },
  methods: {
  	getUserName(id) {
    	this.msg = this.nameDB[id] ? ('用户名：' + this.nameDB[id]) : '用户不存在！'
    }
  }
}

const router = new VueRouter({
  routes : [
    { path: '/user/:id', component: User },
    { path: '/', redirect: '/user/1'}
  ]
})

const app = new Vue({
  router,
  data() {
  	return {
    	userId: 1
    }
  },
  methods: {
    queryUser(id) {
    	this.$router.push(`/user/${id}`)
    }
  }
}).$mount('#app')