vue-learning:37 - router - 目录

Posted webxu20180730

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-learning:37 - router - 目录相关的知识,希望对你有一定的参考价值。

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
    js const route = path: ‘/user/:userId‘ this.$router.push(path:`/user/$userId`) this.$route.params.userId
    2.命名路由传参,使用name和params
    js const route = name:‘home‘,... this.$router.push(name:‘Login‘,params:id:‘leelei‘) this.$route.params.id
    3.查询参数传参,使用path和query
    js this.$router.push(path:‘/login‘,query:id:‘leelei‘) this.$route.query.id
    4.prop形式:布尔/对象/函数
    js const route = [prop:true, ...] const route = [prop: someProp:‘someValue‘] const routes =[props: (route) => ( query: route.query.q ),...]
    5.meta元信息定义数据
    js // 定义路由时,定义元信息 const routes = [ meta: someData:‘someData‘,... , // 获取数据 this.$route.meta.someData

以上是关于vue-learning:37 - router - 目录的主要内容,如果未能解决你的问题,请参考以下文章

vue-learning:24 - component - 目录

vue-learning:22 - js - directives

vue-learning:2 - template - directive

vue-learning:17- js - methods

vue-learning:16 - js - computed

vue-learning:23 - js - leftcycle hooks