VueRouter——编程式导航-动态路由匹配（三）

1.编程式的导航

1.1 两个属性

1.2 使用场景

很多web应用都会在header区域的左边放置一个LOGO，通常情况点击这个LOGO就会使页面跳转到首页。接下来实现它：

来看效果：

那么编程式怎么做呢，先来看看$router是个什么：

点击事件触发后，看看输出：

可以看到，$router是一个路由实例对象。并且它身上有很多方法如push,replace,go，本章只讲push方法：

很简单，只需要将路径写在push里即可。

1.3 $route

动态路由匹配

可以看到类似这种结构相同的组件的渲染，通常使用的是一个组件，只是其中的内容不同。这种场景下我们使用动态路径参数来实现。

{
  path: '/new',
  name: 'new',
  children: [
    {
      path: '231578',
      component: () => import("../components/news/news.vue"),
    },
    {
      path: '331578',
      component: () => import("../components/news/news.vue"),
    }
  ],
},

首先我们可以使用这种方式来实现，但观察路由配置，如果一个课程配一个路由，那么代码会非常的冗余，如果今天有十种课程，明天有一百种课程，还需要我们不停的去配置。。。想想就很麻烦，所以这种方式并不可取。

那么有没有什么更好的方式呢，首先需要确定一个模式：

{
  path: '/new/:id',
  component: () => import("../components/new.vue"),
},

上面代码中的/new/:id就是一个模式，意思是类似/new/123，/new/234这样的路径都将使用new.vue这个组件去渲染。看看效果：

可以看到/new/123和/new/234都能够渲染出来，而/new却不行，因为/new并不符合上述的模式，即/new/:id

下面重要的环节开始了，先来看看$route.params：

看看结果：

如果改变模式：

{
  path: '/new/:userId',
  component: () => import("../components/new.vue"),
},

看看结果：

这就是所谓的动态路由。

使用动态路由做个小demo

router.js：

{
  path: '/new',
  component: () => import("../components/new.vue"),
},
{
  path: '/news/:id',
  component: () => import("../components/news/news.vue"),
},

new.vue：

news.vue：

看看效果：

再来丰富一下：
news.vue：

看看效果：

总结

动态路由相对来说是一个很简单的知识点，但在实际开发中又经常会用到。像一些场景，结构一样，只需要改变数据，这个时候就可以使用动态路由，在结构上我们只需要编写出一个骨架，而在切换时去请求对应的数据进来就可以。这样就可以避免重复的开发相同的结构，并且内容是会增加或减少的。比如上面举出的课程的例子，我们不可能为每一个课程都编写一个结构，所以动态路由很好的解决类诸如此类的问题。

---

Keep foolish, keep hungry.