小伙伴们，你们好！来给你们分享下用Vue.js的Vue-Router处理vue应用里嵌套路由这个小技巧，真的挺强大的！对于咱们这些做单页应用的同学，真是个宝藏工具！

安装Vue-Router

想要Vue-Router运行起来，第一步就是给Vue项目装上它。这可是小菜一碟！你可以用npm或者是yarn装这个依赖项，哪个用着顺手就选那个。装好了之后，在项目开头把Vue-Router导进来，再用Vue.use()启动一下就成。

创建路由实例

npm install vue-router
# 或者
yarn add vue-router

接下来，就是装个路由器，再把路线给挑好。就这儿，我设了俩规矩：首先是那个以”/”开头的根路由，跟咱家设备配对用的；再来这个”/users”，就是用户主导部分，还带了个”:id”结尾的儿子路由，那“This”到底指谁呀？不就是那个UserDetails组件吗！

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

使用router实例

搞定设置之后，就可以开始享受Vue的神奇router功能了！别忘了这个小技巧哟~

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
export default router

创建组件

主页得瞅着拉风点，得炫起来！然后那个啥Users，肯定得有个用户列表咯，再配上那些能直接查看更多信息的小链接超棒哒；最后的话，UserDetails，就是让你更深入了解每位小伙伴的地方~

展示用户详细信息

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例
new Vue({
  router, // 使用router实例
  render: h => h(App),
}).$mount('#app')

要搞定UserDetails这部分，我们要用上$route.params.id这个神器，从路由里拿动态参数。然后，咱就可以用它查用户详细信息。别忘了，细心就是关键

太好了找到了这破玩意儿就在我们网站上，点开个浏览器搜索一下，就能看到！别晃眼了，你们的名字都在首页上亮堂堂的闪烁！还想问啥？赶紧去点人家的头吧

总的来说，想要用Vue做个能嵌套路由的应用，真没那么难：

  

    
Home
  


export default {
  name: 'Home'
}

1. 先安装并导入Vue-Router；

2. 创建路由实例，并配置各种路由规则；

  

    
Users
    

      

        {{ user.name }}
      
    
     
  


export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}

3. 在Vue实例中使用router实例；

先把每个要滴组件搞定，然后在相应的路由里给它们画出来。

  

    
User Details
    
ID: {{ $route.params.id }}
    
Name: {{ user.name }}
  


export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}

5. 在视图中巧妙运用标签展示子路由组件。

跟着这些步子做，搞定Vue嵌套路由轻而易举，编程瞬间好玩儿了！