vue-router的安装、使用15

认识vue-router

目前流行的前端三大框架：

Vue、React、Angular都有自己的路由实现。

• vue-router基于路由和组件实现
  • 路由用于设定访问路径，将路径与组件映射起来
  • vue-router适合用于构建单页面应用。页面路径的改变就是组件的切换。

安装-router

安装vue-router

• 在创建项目是勾选安装vue-router
• 在终端输入命令：npm install vue-router --save
  
  

配置vue-router

• 在src中创建router文件夹，router文件夹下创建index.js，配置路由相关信息
  

• 在index.js中导入vue-router，通过vue.use安装vue-router插件
  
  

• 配置路由和组件之间的应用关系
  

• 创建路由对象，配置映射关系，并导出路由对象
  

• 挂载路由对象到vue实例上

  在main.js中
  
  vue-router配置模板
  index.js

//导入vue、vue-router
import Vue from 'vue'
import vueRouter from 'vue-router'
// 安装vue-router插件
Vue.use(vueRouter)
// 配置路由与组件之间的映射关系
const routes= [
 {
 	path: '/xxx',
 	component: xxx
 }
];
// 创建路由对象
export default new vueRouter({
  // 配置映射关系
  routes: routes
})

使用vue-router

步骤

• 创建对应组件，一个url对应一个组件
  

• 配置路由映射：组件和url映射关系
  
  

• （第一种跳转方法）通过router-link、router-view标签使用路由

  router-link：vue-router内置的组件，会被渲染为一个a标签。

  router-view：根据当前的路径，动态渲染对应的组件。一般顶部的标签、导航，底部的版权信息等和router-view处于同一等级。

  路由切换时，谢欢的是router-view挂载的组件，其他内容不变。
  
  效果：
  
  

路由的默认路径

默认情况下，只有点击对应的router-link，router-view中才会显示对应组件。

但进入某网站时默认自动渲染首页内容，省去手动点击

解决办法：设置默认路径，并重定向到首页

{
	//path配置根路径'/'
	path: '',//或path:'/',
	//重定向
	redirect: '/home'
}

效果：打开网页默认显示home页面

设置history模式

改变路径有两种方法：

• url的hash
  默认使用url的hash方法
  

• HTML5的history

  设置为history模式的方法：

  在router对象中，设置mode为history
  
  效果：
  

router-link的属性

• to：指定跳转路径
  

• tag：指定router-link被渲染成什么效果

  默认被渲染为a标签
  
  
  

• replace：无法保存历史记录，点击回退按钮，无法回退到上一个历史页面

  默认用的pushState，即可以回退页面。
  
  
  使用replace属性
  
  
  

• active-class
  当router-link对应的路由匹配成功时，自动给当前元素设置一个class（默认为router-link-active）

  使用active-class可以将‘router-link-active’更名（在标签中添加该属性更名）
  active-class="xxx"
  
  

简化写法：创建的在路由实例中添加linkActiveClass属性
linkActiveClass: 'xxx'

补充

• （第二种跳转方法）在方法中通过vue-router封装好的$router实现路由跳转
  
  
  初始状态
  
  效果：

  replace同replaceState
  
  push同pushState