vue-router动态路由

vue-router动态路由

最近在用vue.js写一个单页式网页，看文档觉得vue用起来很方便，但是自己写的时候总是遇到大大小小的坑，自己记录一下哈哈哈哈

我的需求

要将相似的路由请求都映射到用一个vue模板上。
个人主页的模板已经写好了，不同的用户需要展示各自的数据，但是都使用这一个vue模板上。类似于http://127.0.0.1/#/homepage/zhangsan,http://127.0.0.1/#/homepage/lisi
查了官方文档，发现要使用动态路由。
官方文档在这里https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

实现

src/router/index.js
添加路由

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/homepage/:username',  // 路径
      name: 'Homepage',   // 路由的名字
      component: PersonalInfo    // 组件名称，记得在文件里引入哦
    }
  ]
})
export default router

user.vue
在这个模板里进行跳转，跳转语句写在这里。

<router-link :to="{ name:'Homepage', params: { username: scope.row.username }}"> {{ scope.row.username }} </router-link>

scope.row.username是参数，
这里设置的params: { username: scope.row.username }}，上面router设置里的path: '/homepage/:username’一样，要保证两个标黄的地方名字一样奥，这样它会自动的用value来替换。