Vue路由

路由

后端路由

本质：是前端请求的url地址 和 服务器资源的对应关系

前端路由

本质：浏览器地址栏的url 和 页面的对应关系

前端页面的的发展历程

• 后端渲染，服务器压力大
• ajax局部渲染，但是浏览器的前进和后退功能不能用
• 单页面(spa single page application)应用: 整个项目只有一个页面
  • 浏览器地址栏的hash值 #
  • Html5 提供了一些方法也可以做到 pushhistory

Vue 的路由

Vue: Vuejs + 组件化 + 路由管理 + 状态管理 + cli

Vuejs

vue init webpack demo

install vue-router? 回车

基本使用 html + js

• 下载并引入

  script src="vue.js"
  script src="vue-router.js"
  

• 生成router实例对象

  let router = new VueRouter({
  
  })
  

• 传递路由表参数

  let router = new VueRouter({
  	routes: [
  		{
  			path: "/login"
  			component: Login // Login 是组件对象，不是组件名称
  		}
  	]
  })
  

• 将router实例挂载到vm实例的身上

  new Vue({
  	el: "#app",
  	router: router
  })
  

• 在结构中生成一个路由出口

  <router-view></router-view>
  

迁移到脚手架

vue init webpack 项目名称

install vue-router? 回车

路由的嵌套

把一级路由的操作再写一遍

Router-view

编程式导航

this.$router 存了很多方法

• push 跳转页面 this.$router.push("/home") 往浏览器历史记录栈内推入/home,所以可以返回到上一个页面
• replace 跳转页面 this.$router.replace("/home") 将浏览器历史记录栈的最后一条替换为/home
• back 返回上一页， this.$router.back() 浏览器的后退
• forward 前进，this.$router.forward() 浏览器的前进
• go(n), 如果n为正数，则代表前进n页，如果n为负数，则代表后退n页

路由传参

• 查询字符串 ?id=1&name=zhang

  // 传
  this.$router.push("/home?id=1&name=admin")
  <router-link to="/home?id=1"></router-link>
  
  // 取
  this.$route.query.id
  

• 动态路由传参(参数必须传递，否则无法匹配路由)

  // 修改路由表
  {
  	path: "/home/:id"
  }
  // 传
  this.$router.push("/home/3")
  // 接
  this.$route.params.id