一、什么是vue-router
  • vue-router是vue.js官方路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
  • vue-router是基于路由和组件的
        - 在vue-router的单页面应用中,页面的路径改变就是组件的切换
        - 路由用于设定访问路径,将路径和组件映射起来
二、vue-router的安装

1.在vue-cli2中安装vue-router
输入命令:vue init webpack xxx来安装vue-cli2,然后在vue-cli2的选项中安装vue-router。如果不知道vue-cli的兄弟们,可以去https://blog.csdn.net/csshuaige/article/details/119054066查看vue-cli的安装和使用

在这里插入图片描述

注意:使用命令npm install vue-router --save也可以安装vue-router

三、使用vue-router

第一步:根目录/src/index.js文件中导入路由对象命名为VueRouter,并调用Vue.use(VueRouter)使用vuerouter对象

在这里插入图片描述

第二步: 在根目录/src/main.js文件中导入路由实例,并在Vue实例中挂载导入的路由实例
在这里插入图片描述
第三步: 根目录/src/App.vue相当于首页,然后在src/components文件夹中创建Luyou1.vue、Luyou2.vue文件,其中内容为
在这里插入图片描述
在这里插入图片描述
第四步: 在index.js中导入创建的Luyou1、Luyou2组件,并设置它们2个对应的路由映射
在这里插入图片描述

第五步: 创建路由实例并将路由映射对象route传入其中,最后导出路由实例router
在这里插入图片描述

第六步: 在App.vue中输入router-link标签,router-link是路由的超链接,点击router-link会跳转到指定路由,to属性表示要跳转的路径router-view标签用于显示对应路由的内容

在这里插入图片描述
最后使用npm run dev命令运行项目
运行结果如下
首页:
在这里插入图片描述
点击路由导航1,地址栏和内容都发生了变化:在这里插入图片描述
点击路由导航2,地址栏和内容都发生了变化:
在这里插入图片描述

至此vue-router的安装和基本使用就演示完毕了。

总结

  1. 安装vue-router
  2. 导入vue-router
  3. 创建组件
  4. 设置组件和路由的映射关系
  5. 使用router-link和router-view来使用路由
Logo

前往低代码交流专区

更多推荐