Vue：动态路由

动态路由

1.什么是动态路由？

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User },
     // 普通路由
    { path: '/Login', component: Login },     
  ]
})

上面就是动态路由，根据其参数（比如这儿的id）的不同，可以让不同的路由指向同一个组件，组件又能根据它传过来的值渲染成不同的样子，组件里可以用 this.$route.params 来获取这个参数的值

2.动态路由常见使用场景

匹配404

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当项目路由地址有问题的时候，可以用该方法来指向404页面

CSDN等网站每篇博客的地址

大家可以看到，CSDN每篇博客的样式都是差不多的，可是每篇文章的网址又不一样，这就是运用了动态路由匹配的，每篇文章对应一个序列码，然后再根据该序列码后端把这篇文章传给前端，来进行渲染