介绍 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,提升应用的用户体验。
![xmind](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 3
- 资源: 880
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)