Vue学习笔记进阶篇之vue-router安装及使用方法

介绍 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介绍 ）vue-cli脚手架工具的。 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装: npm install vue-router --save –s Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 深度集成，使得构建单页面应用（SPA）变得更加简单。Vue Router 提供了基于路径的导航守卫、动态路由匹配、命名视图等特性，让应用中的路由管理变得灵活且高效。 在 Vue 中，单页面应用的核心在于路由和组件的映射。不同于传统多页面应用通过超链接进行页面间的跳转，Vue Router 使你能定义路径，并将这些路径与相应的组件关联。当用户在浏览器地址栏中更改路径时，Vue Router 将自动切换对应的组件，实现页面内容的更新，而无需完整页面刷新。 在安装 Vue Router 时，首先确保你已经使用 vue-cli 创建了一个项目。进入项目目录，例如 `my-demo1`，在终端中运行 `npm install vue-router --save` 命令。`--save` 参数会将 vue-router 添加到 `package.json` 文件的依赖项中，便于管理。 安装完成后，你需要在项目中引入并注册 Vue Router。在 `main.js` 文件顶部，使用 ES6 的模块导入方式引入 Vue Router： ```javascript import VueRouter from 'vue-router' ``` 接着，使用 `Vue.use()` 注册 Vue Router： ```javascript Vue.use(VueRouter) ``` 接下来，你需要实例化一个 Vue Router 对象，配置你的路由规则。这通常包括模式设置（如 `mode: 'history'`，这会让应用使用 HTML5 的 History API 进行更友好的 URL 管理）以及一个路由数组，每个路由对象包含 `path` 和 `component` 属性： ```javascript const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: DemoHome }, { path: '/about', component: DemoAbout }, { path: '/contact', component: DemoContact } ] }) ``` 这里的 `path` 是路径，而 `component` 是路径匹配成功后要展示的组件。`DemoHome`, `DemoAbout`, `DemoContact` 都是预先创建的 Vue 单文件组件（SFC）。每个组件包含 `template`, `script` 和 `style` 部分，用于定义视图结构、逻辑和样式。 在 `main.js` 中导入并注册这些组件： ```javascript import DemoHome from './components/DemoHome' import DemoAbout from './components/DemoAbout' import DemoContact from './components/DemoContact' ``` 在 Vue 实例中注入 `router`： ```javascript new Vue({ el: '#app', router, template: '<App/>', components: { App } }) ``` 至此，Vue Router 已经被成功集成到项目中，你可以通过定义的路径在不同组件间进行导航。在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让开发者能够构建出结构清晰、易于维护的单页面应用。通过学习和掌握 Vue Router，你可以更自如地驾驭 Vue.js，提升应用的用户体验。