编程式导航传参

(通过js代码实现跳转)

按照path进行跳转

第一步：

在app.vue中(前提是规则已经配置好)

<template>
  <div id="app">
    App组件
    <button @click='login'>跳转</button>
    <!--路由出口-将来匹配的组件渲染地方-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    login () {
      this.$router.push('/login')//点击按钮实现跳转功能，$router后面是个方法
    }
  }
}
</script>

实现回退，在跳转的那个组件中实现回退

1 动态路由传参

this.$router.push('/article/2')
组件获取参数: this.$route.params.id

2 查询参数传参数

this.$router.push('/article?id=2&name=zs')
或写完整写法 this.$router.push({path: '路径', query: {参数1:值,参数2:值,...}})
路由规则path -> /路径
组件获取 this.$route.query.id
按照命名路由进行跳转

1 字符串形式

 this.$router.push('/article/2')

2 对象形式 注意 path不能与params一起使用

this.$router.push({ path: '/article/5' })
    this.$router.push('/article?id=2')
 完整写法
   this.$router.push({
   path: '/article',
 查询参数
   query: {
   id: 1
  }
   })

3 根据命名路由跳转并传参

 跳转
   this.$router.push({
   name: 'articleDetail',
   动态传参
   params: {//如果查询参数用query
   id: 10 //规则里面是这种形式带id的/article?id
   }
   查询传参
    params: {
   id: 10 //规则里面的id随意换
   }
})