VueRouter——程序化导航-动态路由匹配（三）

1.程序化导航1.1两个属性1.2使用场景很多web应用都会在header区域的左侧放置一个LOGO。页面跳转到首页。接下来实现它：看效果：那编程怎么样为此，让我们看看$router是什么：点击事件触发后，查看输出：可以看到$router是一个路由实例对象而且它有push、replace、go等多种方法，本章只讲push方法：很简单，把路径写在push里面就可以了。1.3$route$route实际上包含了当前路由下的所有信息。看看输出：看看查询：动态路由匹配阅读文本总是有点混乱。例如：你可以看到结构相同的类似组件Rendering通常使用一个组件，但内容不同。在这个场景中，我们使用动态路径参数来实现。{path:'/new',name:'new',children:[{path:'231578',component:()=>import("../components/news/news.vue"),},{路径:'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：$route.params)}}看结果：如果你改变模式：{path:'/new/:userId',component:()=>import("../components/new.vue"),},lookResult:这个叫动态路由。使用动态路由做个小demorouter.js：{path:'/new',component:()=>import("../components/new.vue"),},{path:'/news/:id',component:()=>import("../components/news/news.vue"),},new.vue：news.vue：看效果：再来丰盛一下：news.vue：