zoukankan      html  css  js  c++  java
  • Vue中Route的对象参数和常用props传参

    方便跳转传参,避免之前傻傻的用query参数

    //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 路由元信息

     可以在watch监听$route查看细节,比如打开某单页就会触发该单页上的$route,看到别人用来加载参数

    ------------------------------------------------------------------------------------------------------------------------------------------

    方便的传参

    方式一(会让url带参数,不是很喜欢):

    const router = new VueRouter({
        routes: [
            { 
                path: '/user/:id', 
                component: User, 
                props: true,
           name:'
    user'
           }
       ]})

    A页面:

    this.$router.push('/usr/123') //注入路由器后才可以使用this.$router

    B页面:

    const User = {
        props: ['id'],
        template: '<div>User {{ id }}</div>'
    }

     方式二(内存上的传递,nice),重点是一个用path,一个是用name

    this.$router.push({
        name: 'user',//路由里面取的名字
        params: {
            user: {
                name: '小明',
                age: 18,
                gender: '男',
            },
         Id:111 } })

    翻官方文档要累死,打开速度还慢,做个笔记

  • 相关阅读:
    Jmeter非GUI、GUI模式压测生成测试报告
    测试轮播banner
    Jmeter如何监控服务器CPU、内存、i/o等资源
    java基础(三)
    用python从符合一定格式的txt文档中逐行读取数据并按一定规则写入excel(openpyxl支持Excel 2007 .xlsx格式)
    L2-011. 玩转二叉树
    L2-010. 排座位
    L2-008. 最长对称子串
    L2-009. 抢红包
    L2-006. 树的遍历
  • 原文地址:https://www.cnblogs.com/RainbowInTheSky/p/13948176.html
Copyright © 2011-2022 走看看