Vue Router基础教程：路由配置与动态匹配

"本文将详解vue-router的基础知识，包括起步、动态路由匹配等核心概念。" 在前端开发中，vue-router是Vue.js官方推荐的路由管理库，它使得页面间的切换变得简单而优雅。下面我们将深入探讨vue-router的基本使用方法。 一、起步 首先，我们需要在HTML中设置基础的路由结构。在例子中，我们看到一个`<div id="myDiv">`容器，其中包含两个`<router-link>`元素，它们用于导航到"/foo"和"/bar"路径。`<router-view>`则作为组件的渲染出口，实际的组件将会在这个位置被替换显示。 ```html <div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link> <router-view></router-view> </div> ``` 接着，我们需要定义对应的组件。例如，`foo`和`bar`组件： ```javascript var foo = { template: "<p>我是foo组件</p>" }; var bar = { template: "<p>我是bar组件</p>" }; ``` 然后，我们需要创建一个路由配置数组，将组件与路径关联起来： ```javascript var routes = [ { path: '/foo', component: foo }, { path: '/bar', component: bar }, ]; ``` 创建vue-router实例，并将其注入到Vue实例中： ```javascript const router = new VueRouter({ routes }); // 注意：这里routes没有'r' var routerVue = new Vue({ router }).$mount("#myDiv"); ``` 二、动态路由匹配 有时我们希望根据不同的参数显示不同的内容，比如显示不同用户的信息。这时我们可以使用动态路由匹配。动态参数通过冒号":"来定义，如"/User/:id"。 ```html <div id="myDiv"> <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </div> ``` 对应的组件可以访问这些动态参数，通过`$route.params`来获取： ```javascript const User = { template: '<p>我的ID是{{$route.params.id}}</p>', }; ``` 现在，当点击链接时，`:foo`和`:bar`会被替换为实际的值，如"123"或"456"，并在`User`组件中显示相应的ID。 总结，vue-router提供了强大的路由管理功能，包括基本的路径导航、组件的按需加载以及动态路由匹配等。通过合理使用，我们可以构建出高效且易于维护的单页应用。