vue-router安装和配置方法

vue-router是vue.js官方的路由插件，里面组件和URL的映射关系由vue-router帮我们管理。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

一：首先下载插件，当我们初始化项目时，有一个选项vue-router选项，我们选y,他就帮我们自动下载插件了。

 

 如果没选，也可以手动安装  npm install vue-router --save

二：

 

1. 导入路由对象，并且调用Vue.use(Router)
2. 创建路由实例，并且传入路由映射配置
3. 在vue实例中挂载创建的路由实例

 index.js文件夹基本配置

 

 

 

 使用vue-router的步骤

1. 创建路由组件
2. 配置路由映射:组件和路径映射关系
3. 适用路由：通过<router-link>和<router-view>

 

 

 

 

 

 <router-view>该标签会根据当前的路径，动态渲染不同的组件替换到router-view的位置。

 

路由的默认路径

 

在上面当我们想加载首页的组件，但是需要点击才可以加载相应的组件，但是有些需求例如首页是默认不用点击直接显示在页面上，这时候我们应该怎么处理呢？

在router的index.js 文件里多配置 一个映射

 

改变URL不跳转路径有两种方法

方法一：使用BOM对象上的location对象上的hash

 

 方法二：使用BOM对象上的history对象

 

 Vue-router默认使用的是第一种hash（默认）

使用hash会在路径上出现井号  #，而使用history没有井号