vue-learning：37

vue路由vue-router

目录

1. 前端路由历史
   1. 服务端渲染(SSR:server side render)
   2. 客户端路由(client side routing)
2. 前端路由实现原理
   1. hash模式: location.hash 和 hashChange事件
   2. history模式： history 和 popstate事件
3. vue-router
   1. const router = new VueRouter(option)中的选项对象option
   2. 路由器实例对象router
   3. 路由对象route
   4. router-link标签的特性
   5. router-view标签的特性
4. 路由传参的5种方式
   1.路由动态参数: '/user/:userId'和params

   const route = {path: '/user/:userId'}
   this.$router.push({path:`/user/${userId}`})
   this.$route.params.userId
   

   2.命名路由传参,使用name和params

   const route = {name:'home',...}
   this.$router.push({name:'Login',params:{id:'leelei'}})
   this.$route.params.id
   

   3.查询参数传参，使用path和query

   this.$router.push({path:'/login',query:{id:'leelei'})
   this.$route.query.id
   

   4.prop形式：布尔/对象/函数

   const route = [{prop:true, ...}]
   const route = [{prop: {someProp:'someValue'}] 
   const routes =[{props: (route) => ({ query: route.query.q }),...}]
   

   5.meta元信息定义数据

   // 定义路由时，定义元信息
   const routes = [
   {meta: {someData:'someData'},... },
   // 获取数据
   this.$route.meta.someData