• vue知识点-$route和$router


    一、$route表示当前路由信息对象

      表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录

      路由信息对象:即$router会被注入每个组件中,可以利用它进行一些信息的获取

    1)$route.path:

      字符串,对应当前路由的路径,总是解析为绝对路径:'/foo/bar'

    2)$route.params

      一个key/value对象,包含了动态片段和全匹配片段

      如果没有路由参数,就是一个空对象

    3)$route.query

      一个key/value对象,表示URL查询参数

      例如对于路径:/foo?user=1,则有$route.query.user=1

      如果没有查询参数就是一个空对象

    4)$route.hash

      当前路由的hash值:不带#,如果没有hash值,则为空字符串。锚点

    5)$route.fullPath

      完成解析后的URL,包含查询参数和hash的完整路径

    6)$route.matched

      数组,包含当前匹配的路径中所包含的所有片段所对应的的配置参数对象

    7)$route.name

      当前路径的名字

    8)$route.meta

      路由元信息

    二、$route的应用场景

      (1)在组件内,即this.$route

      (2)在$route观察者回调内 router.match(loaction)

      (3)导航守卫函数

        router.beforeEach((to,from,next) => {

          //to 和 from 都是路由信息对象

        })

        watch: {

          $route(to, from){

            //to 和 from 都是路由信息对象

          }

        }

    三、$router对象

      全局的路由实例,是router构造方法的实例

      在vue实例内部,可以通过$router访问路由实例

      

      import Router from 'vue-router'  

      const routes = [

        {path:"/",name:首页,redirect:'/home'},

        {path:'/login',name:登录,component:Login},

        {path:'/home',component:Home}

      ] 

      const router = new Router {

        routes

      }

    //全局注册路由,全局挂载路由实例

      Vue.use(Vuerouter)

    四、//路由实例方法

      //字符串

      this.$router.push('home')

      //对象

      this.$router.push({path:"home'})

      //命名路由

      this.$router.push({name:user,params:{userId:123}})

      //带查询参数,变成/register?plan=123

      this.$router.push({path:"register",query:{plan:'123'}})

      

    push方法和<route-link :to="...">是等价的

      注意:push方法的跳转会向history栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面

      

    五、路由实例方法go

      //页面路由跳转,前进或者后退

      this.$router.go(-1) //后退

      

      //页面实例方法replace

      push方法会向history栈添加一个新的记录,而replace方法是替换当前的页面

      一般使用replace方法来做404页面

      

    转自:https://www.jianshu.com/p/fa0b5d919615

  • 相关阅读:
    2018最新php笔试题及答案(持续更新)
    快速上手模板制作
    春节期间小游戏同时在线人数最高达2800万人/小时
    公众平台新增修改文章错别字功能 每篇文章允许被修改一次仅限正文内五个字
    微信6.6.2版更新:支持两个账号一键切换
    小程序支持打开APP了 还有小程序的标题栏也可以自定义
    小程序发布重磅数据:日活跃用户数1.7亿、已上线小程序58万个,覆盖100万开发者、2300个第三方平台
    张小龙2018PRO版微信公开课演讲全文 透露2018微信全新计划
    除了跳一跳还有16款微信小游戏可以玩
    小游戏里潜藏着600亿的大市场
  • 原文地址:https://www.cnblogs.com/jjbw/p/12129555.html
Copyright © 2020-2023  润新知