前端壹贰叁

希望成为一个熟悉设计、前端、后端的伪全栈开发

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
    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
    

posted on 2019-06-16 13:18  前端壹贰叁  阅读(197)  评论(0编辑  收藏  举报

导航