vue 路由进阶

vue 路由进阶

        $router:路有管理对象

        $route：每条路有的对象

push跳转

name+params

    this.$router.history.push({
      name:"路有名称",
      params:{
        "属性名称":{
          
        }
      }
    })

path+query

    this.$router.history.push({
    	path:"/路径",
    	query:{
    		"属性名称":"值"
    	}
    })

    this.$router.history.push({
    	name:"路有名称",
    	query:{
    		"属性名称":"值"
    	}
    })

router-link

    <router-link :to={name:"路有名称",params:{"属性名称"："属性值"}}></router-link>

动态路径参数

首先在路由配置文件中，修改路径，增加通配符

    const routes = [
      {
        // 动态路径参数 以冒号开头
        path:"/details/:参数名称"
      }
    ]

    <router-link :to="`/details/${参数的值}`"></router-lin>

2、获取路有传递数据

name+params

    this.$route.params.属性名称

path+query

    this.$route.query.属性名称

to={}

    this.$route.query.属性名称

to+动态路径参数

    this.$route.query.属性名称

3、路由元数据

可以在定义组件路由时，给每一个路由对象添加一些额外的属性

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        meta:{
          isShowTabbar:true
        }
      },
      {
        path:"/category",
        name:"Category",
        component: Category,
        meta:{
          isShowTabbar:true
        }
      },
      {
        path:"/cart",
        name:"Cart",
        component: Cart,
        meta:{
          isShowTabbar:true
        }
      },
      {
        path:"/mine",
        name:"Mine",
        component: Mine,
        meta:{
          isShowTabbar:true
        }
      },
      {
        path:"/details",
        name:"Details",
        component:()=>import("../views/Details.vue"),
        meta:{
          isShowTabbar:false
        }
      }
    ]

可以通过组件的this.$route对象去获取

    this.$route.meta.属性名称