vue全家桶_路由_01_$router与$route

forgood
192 阅读3分钟

$router(进行编程式导航)

router是全局路由的实例对象,可以通过$router访问路由实例；是用来进行编程式导航的(实现路由跳转的);

$router的基本方法

  • $router.push()：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.；
  • $router.replace():跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录(同样会刷新页面)
  • $router.go(num):这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步

$route(存储当前的路由信息)-只读属性

  • $route就是存储当前路由的信息，可以用来监听路由的变化并且可以获取query和params的参数;与导航守卫中的to,form存储的内容相同

  • 属性

    • path:获取当前的路径
    • fullPath：完整的路径(携带参数)
    • params：params类型的参数
    • query：query类型的参数
    • meta：路由元信息
    • name:组件名
    • hash：取自location.hash

路由传参的三种方式

1.query进行路由传参

语法1(简写)
this.$router.push('url?参数1=值1&参数2=值2')
语法2
this.$router.push({
    path:'路由地址',
    query:{
        参数名1：值1，
        参数名2：值2
    }
})
其他页面接收
this.$route.query --- 值为一个对象，里面的属性就是传递过来的参数值；
特点
  • query方式进行路由传参是将参数拼接在url上传递的，刷新页面参数不会丢失
  • 注意不能传递数组/对象等复杂数据类型
清空参数

  • 当我们在页面接收参数之后想要清空参数时

    • this.$route.query={}
# 报错-原因：$route.query是一个 只读 对象

    • # 会成功去掉url上的参数； 缺点：会刷新页面！
this.$router.push(query:{})

2.params方式进行路由传参

语法：

  • 1.在配置路由时配置name属性

    • {path:'路径'，component:导入的路由，name:'路由名，可以代表当前路由'}

  • 2.语法

    • this.$router.push({
    name:'路由名',
    params:{
        参数名1：值1，
        参数名2：值2
    }
})
其他页面接收
this.$route.params --- 值为一个对象，里面的属性就是传递过来的参数值；
特点

  • 页面一刷新传递的参数就会丢失；

  • 只能结合name使用；

  • 若是提供了path，则params会被忽略；

  • 注意事项

    • 无法在当前页面跳转到当前页面；

      • 举例说明：现在在消息中心页面 ， 点击某个按钮跳转到消息中心页面(当前页面)，即使参数不相同，也不会进行路由跳转(相当于没有进行任何操作)！

3.动态路由匹配

很多时候我们需要给 给定匹配模式的路由 映射到同一个组件；例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

配置步骤

  • 1.配置路由参数,可以在同一个路由中设置 多个 路径参数，它们会映射到 $route.params 上的相应字段上

    • path:'/report/:user/financeReport/:id'

      • 访问路径为： /report/user参数值/financeReport/id参数值

    • path:'/report/:user?/financeReport/:id'

      • 访问路径为： /report/user参数值/financeReport/id参数值 或 /report/financeReport/id参数值
      • ?表示该参数可传可不传！
获取
this.$route.params --- 值为一个对象，里面的属性就是传递过来的参数值；
注意事项

  • 跳转路由时传参(大部分是用于传递一些id之类的--不能使用数组/对象/中文字符)；

  • 若是有的跳转路由传参，有的不需要传参--只需要在参数名加一个?就好了；

    path:'路径/：参数名？'

  • 在url中也有体现，并且刷新数据不会丢失

4.注意问题

[1]---当我们使用路由进行传递参数时;

注意：url路经中的都是字符串

当我们想要获取id等是数字时，需要转换；

问题1_跳转到页面获取参数后清空参数

  • 跳转时传参

    • this.$router.push('/messageCenter?mid=555&page=1')

  • 页面接收并清除

    • created(){
  // 页面接收
  const {mid , page} = this.$route.query
  // 清除方法1-报错(原因：$route是只读属性，写入会报错)
  this.$route.query = {}
 
  // 清除方法2-会刷新页面重新进入created方法，我们想做的操作也操作不了了
  this.$router.push({'/messageCenter'})
  
  // 清除方法3-不会刷新页面仅仅是就被替换了
  window.history.replaceState({},"",window.location.href.split('?')[0]);
}
    • \
avatar
文章
阅读
粉丝