如何使用 Vue Router 实现 URL 参数的动态匹配和监听

最近学了个用用户ID查他们资料的新招儿，动态URL参数把我搞晕了，但看完几本书试了试，发现用VueRouter这事儿变得特简单！所以今天就给大家说说怎么用VueRouter搞定动态URL参数匹配与监听~

1.VueRouter简介及其重要性

VueRouter这个玩意儿，你可以把它理解为Vue自带的网页跳转小帮手，让我们做SPA变得更加容易。它牛在哪儿？它能看懂网址上那些繁琐的参数，然后自动给你展示相应的页面，这样用户用起来就舒服多了，而且还能满足各种奇奇怪怪的需求！

2.安装和引入VueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

装个vue-router首先得把它放哪儿去？我用npm帮你搞定这个问题。接下来就在你的主文件（比如main.js）里安插好vue-router，看起来简单，却是路由的基本功

3.创建并配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import User from './views/User.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

安装上VueRouter，咱们就可以用个名叫router.js的小文件来搞定所有的路由。这文件里头，有基本的路径和各种带参数的动态路径啥的，然后，就是在这些地方加上那么一个小小的冒号(:)，这样就能轻松应对各种用户界面！

4.接收和使用动态参数

$route.params.id这个神器可以帮我抓那种动态生成的‘id’咯。只要把id变了，就能立刻看到对应的用户资料~而且，咱还会玩儿Vue里的watch功能，就像个眼线一样，盯着那个id看它有没有变化。不管你咋换页面，总是能看到最新的用户哥们儿资料！

  

    
User ID: {{ userId }}
  


export default {
  name: 'User',
  data() {
    return {
      userId: ''
    }
  },
  created() {
    this.userId = this.$route.params.id
  },
  watch: {
    '$route.params.id'(newId) {
      this.userId = newId
    }
  }
}

5.将路由配置注入Vue实例

好，现在就来搞定最后一步！就是把咱们的router设置放进vue的实例里，这样就能让每个页面都能享受到导航的便捷！不管你从哪儿进入，都能用VueRouter方便地进行浏览和展示内容！

6.实际应用案例

真的，我用VueRouter实战过了，效果不错！比如说要看ID是1的那位用户，直接点”/user/1″就行；要是想了解下ID为2的朋友，就去点”/user/2″喽。这种方法简单便捷，大家都爱用，确实帮我省力很多！

7.总结与反思

import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

用过之后，我真觉得VueRouter处理动态路由太棒了！省时又稳定，还能应对各种变数。所以立刻决定和你们分享这个神器，希望能帮到你们，让你们在编程中更得心应手，乐在其中~

8.提出问题

你有没有碰上過用VueRouter時的困擾？怎麼解決的？咱來聊聊天，互相傳遞些經驗！