Vue中的query传参和动态路由传参

query传参

2种传参:
1、go
2、this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})

//在路由匹配的组件中获取数据:
mounted(){let queryObj=this.$route.query}

动态路由传参

设计:
const router=new VueRouter({
     routes:[
         {path:"/home/:id",component:()=>import("./home.vue")},
         {path:"/about",component:()=>import("./about.vue")}]
 })
 
 2种传参:
 go
 this.$router.push({path:"/home",params:{id:123}})
// 如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
 
//在路由匹配的组件中获取数据:
mounted(){let paramsObj=this.$route.params}

案例

路由代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/test1/:id', //动态路由
    name: 'test1',
    component: () => import('../views/test1View.vue')
  },
  {
    path:'/test2',
    name:'test2',
    component:()=>import('../views/test2View.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

主界面代码：

test1界面代码

test2界面代码

效果图：

 分别点击动态路由传参的各个链接得到的结果为

1、

2、

 

3、

 

  分别点击query传参传参的各个链接得到的结果为

1、

2、

 

3、

 

4、