Vue-router 2.0基础教程：动态路由、嵌套与编程导航

"这篇教程详细介绍了Vue-router 2.0在vue.js中的基础实践，涵盖了基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由和命名视图等核心概念。" Vue-router 2.0是Vue.js官方推荐的路由管理库，它允许开发者管理应用程序的导航和视图组件。在Vue.js应用中，路由扮演着连接UI与数据的重要角色，使得在单页面应用中能够实现平滑的页面切换和状态管理。 ### 1. 基础用法 Vue-router 2.0的基础用法通常包括以下步骤： - 定义路由组件：首先，你需要创建或导入Vue组件，这些组件将在路由被激活时显示。例如，`Foo` 和 `Bar` 组件。 - 配置路由：通过定义一个包含`path`和`component`的对象数组来创建路由配置。`path`指定了URL路径，`component`是对应路径显示的组件。 - 创建router实例：使用VueRouter构造函数创建一个新的路由器实例，并传入之前定义的`routes`配置。 ```javascript const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]; const router = new VueRouter({ routes }); ``` - 使用router-view：在Vue模板中，`<router-view>`是一个特殊的组件，它会根据当前激活的路由来渲染对应的组件。 ```html <div id="app"> <h1>HelloApp!</h1> ... <router-view></router-view> </div> ``` ### 2. 动态路由匹配 动态路由匹配允许我们在路径中使用动态段，如`:id`，以便处理具有相似结构但数据不同的URL。动态段在路由配置中用冒号表示，而在组件中可以通过`this.$route.params`访问。 ```javascript const User = { template: '#user', props: ['userId'] }; const routes = [ { path: '/user/:userId', component: User } ]; ``` ### 3. 嵌套路由 嵌套路由允许在一个路由下创建多个子路由，形成路由层级结构。在`<router-view>`内部可以嵌套多个`<router-view>`，每个对应一个子路由。 ```javascript const routes = [ { path: '/users', component: Users, children: [ { path: ':userId', component: User } ] } ]; ``` ### 4. 编程式路由 除了使用`<router-link>`标签进行导航外，Vue-router还提供了编程式的导航方法，如`router.push`、`router.replace`、`router.go`等，它们可以在Vue实例或组件方法中调用，以实现动态跳转。 ```javascript this.$router.push('/foo'); ``` ### 5. 命名路由 命名路由允许我们给路由分配一个名称，这样在编程式导航时可以使用名称而不是具体的路径。 ```javascript const routes = [ { name: 'user', path: '/user/:userId', component: User } ]; this.$router.push({ name: 'user', params: { userId: '123' } }); ``` ### 6. 命名视图 命名视图允许在同一个路由下显示多个视图，每个视图有自己的名字。这对于构建复杂布局很有帮助。 ```javascript const routes = [ { path: '/', components: { default: Overview, sidebar: Sidebar } } ]; ``` 在上述代码中，`default`和`sidebar`是两个命名视图，它们可以在同一个路由模板中并排展示。 通过理解并熟练运用以上这些知识点，开发者可以充分利用Vue-router 2.0的强大功能，构建出高效、灵活的Vue.js单页面应用。