vue路由模板是html,vue-router 详解

文章目录

1、认识vue-router

2、安装和使用vue-router

3、路由的默认路径

4、HTML5的History模式

5、router-link属性介绍

6、路由代码跳转

7、动态路由

8、路由懒加载

9、嵌套路由实现

10、传递参数的方式

11、导航守卫的使用

12、TabBar实现思路

1、认识vue-router

目前前端流行的三大框架，都有自己的路由实现：

Angular的ngRouter

React的ReactRouter

Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

vue-router是基于路由和组件的

路由用户设定访问路径的，将路径和组件映射起来。

在vue-router的单页面应用中，页面的路径的改变就是组件的切换

2、安装和使用vue-router

第一步：安装vue-router

npm install vue-router --save

第二步：在模块化工程中使用它(因为是一个插件，所以可以通过Vue.use()来安装路由功能)

导入路由对象，并且调用Vue.use(VueRouter)

创建路由实例，并且传入路由映射配置

在Vue实例中挂载创建的路由实例

使用vue-router的步骤：

第一步：创建路由组件

第二步：配置路由映射：组件和路径映射关系

第三步：使用路由：通过和

代码实现步骤：

创建router实例

挂载到Vue实例中