vue 路由跳轉及傳值和取值

一.聲明式：

使用router-link標簽中的to屬性：

1.無參數： 

<router-link :to="{name:'index'}}">    或者    <router-link to='/index'>

 2.帶參數：

<router-link :to="{name:'index',query:{id:'xxx',name:'xxx'}}">

 

二.編程式：

替換：

    this.$router.replace{path：‘/login’ } //一般用戶跳轉錯誤頁或登錄頁，這種路由時使用

push方法： 

1.無參數：

this.$router.push('路由地址')

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

this.$router.push({path:'路徑')};//使用路由地址

this.$router.push({name:'路由名')};//使用路由名稱

2.帶參數：

使用query傳參及取值：

//傳參：
this.$router.push({path:'/test',query:{name:'張三', age:18}}); //url方式傳參，等價於<a href="http://baidu.com?aa=xx&bb=xx">百度</a>

//在接收頁面取值
this.$route.query.name//獲取name值，其他雷同

 

使用params傳參:

//傳參
this.$router.push({name:'測試頁',params:{name:'張三', age:18}});

//取值
this.$route.params.name
//坑一:name代表參數名稱，（獲取不到參數時，請看這句話：路由的params對象使用，必須要通過路由名來調用路由，而不同通過path來調用，而query對象則沒有這個要求。）
//坑二:如果有子路由,並且父路由使用了redirect屬性重定向到子路由時,傳參時name一定是子路由的name(深坑)
路由配置如下:

{

  name:'測試',//非此name

  path: '/test',

  component: Layout,

  redirect: '/test/index',//使用此屬性

  children: [{

    path: 'index',

     name: '測試頁',//子路由名稱

    meta: {

      i18n: 'test'

    },

    component: () =>

      import( /* webpackChunkName: "views" */ '@/views/util/test')

  }]

}, 

使用路由地址傳參：（動態路由）

//傳參
this.$router.push({path:'/test${id}'});//此方式傳參，需要調整路由

//取值

this.$route.params.id//id代表參數名稱

//路由配置如下：
{
  path: '/test:id',//變化點
  component: Layout,
  redirect: '/test/index',
  children: [{
    path: 'index',
    name: '測試',
    meta: {
      i18n: '測試頁'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/test/index')
  }]
}