码迷,mamicode.com
首页 > 其他好文 > 详细

vue知识点-$route和$router

时间:2020-01-01 20:21:56      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:替换   路径   his   数组   添加   direct   等价   bsp   cti   

一、$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

vue知识点-$route和$router

标签:替换   路径   his   数组   添加   direct   等价   bsp   cti   

原文地址:https://www.cnblogs.com/jjbw/p/12129555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!