Vue - vue-router - 参数传递

---

一、query的类型

query对应的是一个对象. 对象中使用query的key作为传递方式.

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/'+userid">用户</router-link>
    <router-link :to="{}">档案</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userid: 'zhangsan'
    }
  },
}
</script>

<style>
</style>

1.1 对象里面的属性

• path : 指定路径
• query : 指定参数, query后面跟一个对象. 对象里面再指定具体的参数

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/'+userid">用户</router-link>
    <router-link :to="{path: '/profile', query: {name: 'zhangsan', age: 18}}">档案</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userid: 'zhangsan'
    }
  },
}
</script>

<style>
</style>

1.2 获取query里面的数据

<template>
  <div>
    <h2>我是档案</h2>
    <h3>{{$route.query.name}}</h3>
    <h3>{{$route.query.age}}</h3>
  </div>
</template>

<script>
  export default {
    name: 'Profile'
  }
</script>

<style>

</style>

三、命名路由

我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了

const routes = [
  {
    name: 'search',
    path: '/search',
    component: Search,
  },
]

methods: {
    // 搜索方法
    goSearch() {
      this.$router.push({
        name: 'search',
        query: {
          keyword: this.keyword
        }
      })
    }
  },

四、params参数

使用params传参只能使用name进行引入

// params传参 使用name
this.$router.push({
 name:'second',
 params:{
   id:'111',
   name:'params'
 }
})

// params 接收参数
this.id  = this.$route.params.id;
this.name = this.$route.params.name;

// 路由
{
 path:'/second/:id/:name',
 name:'second',
 component:()=>import('@/view/second')
}

4.1 指定params参数可传可不传

在占位后面加一个问号

// 路由
{
 path:'/second/:id?',
 name:'second',
 component:()=>import('@/view/second')
}

4.2 params参数可传可不传，如果传递的是空串，怎么处理？

可以使用undefined解决

// params传参 使用name
this.$router.push({
 name:'second',
 params:{
   id:''||undefined
 }
})

// 路由
{
 path:'/second/:id',
 name:'second',
 component:()=>import('@/view/second')
}

4.3 路由组件传递props参数

布尔写法

// 路由
{
  path:'/second/:id',
  name:'second',
  component:()=>import('@/view/second'),
  props:true
}

五、$router和$route的由来

2.1 $router

$router就是 在创建 路由时 new 出来的 VueRouter

VueRouter类

2.2 $route

$route 就是当前活跃的路由

六、编程式路由跳转到当前路由，多次执行会抛出NavigationDuplicated的警告错误

重写push方法

// 重写push方法
// 先把VueRouter原型对象的push方法保存一份
let originPush = VueRouter.prototype.push

VueRouter.prototype.push = function(location, resolve, reject){
  if(resolve && reject) {
    originPush.call(location, resolve, reject)
  }else {
    originPush.call(location, ()=>{}, ()=>{})
  }
}