Vue-router 详解二：基础

vue-router 是基于路由和组件

路由用于设定访问路径, 将路径和组件映射起来

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

 

第一：安装命令：   npm install vue-router --save

 

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

 

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

 

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

 

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

 

 

使用路由的步骤

第一步：创建路由组件

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

第三步：使用路由，通过<router-link>和<router-view>

 

 

 

 

创建组件

 

 

 

配置组件和路由的映射关系

 

 

 

使用路由

 

<router-link>：该标签是一个vue-router中已经内置的组件，他会被渲染成一天 <a> 标签

<router-view>：该标签会根据当前的路径，自动渲染成不同的组件

路由切换的时候，切换的是<router-view>挂载的组件, 其他内容不会发生改变

 

 

<router-link to="/home" tag="button" replace active-class="active">首页</router-link>

上面代码的 作用是 ，将router-link标签渲染的<a>标签 转成 button按钮    将actice-class替换成active

 

 

 

路由的默认路径

我们在routes中又配置了一个映射

path配置的是根路径: /

redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了

 

 

H5的history模式

前面说过了，两种改变路径的方式：URl的hash 和 H5的history

我们router中默认的情况下，就是URL的hash，就是url中，有#

如果需要改变的话 需要配置，如下

 

 配置完之后，url中没有#

 

 

router-link的补充

 

 

 

 

如下配置 router-link-active

 

 

 

这样，当<router-link>对应的路由匹配成功时候，生成的当前元素的class就是active

 

 

路由代码跳转

 

 

 

 

动态路由