[JavaScript知识库]Vue路由传参

路由

router-link页面的跳转 类似a标签
router-view页面展示的位置

跳转

标签形式

 <router-link :to="{path:'/'}">登录</router-link>
 <router-link :to="{name:'Index'}">个人中心</router-link>

编程跳转

 this.$router.replace({
        // path:"/my",
        name:"My"
  })

push() 追加页面
replace() 关闭所有的页面打开新的页面

跳转传参

query

<router-link
          :to="{ path: '/essay', query: { id: essay.id } }"
        >
          <h4>{{ essay.title }}</h4>
        </router-link>

 this.$router.push({
        path:"/essay",
        query:{
			id: essay.id
		}
  })

• 接收参数

this.$route.query.id

params

 this.$router.push({
        name:"Essay",
        params:{
			id: essay.id
		}
  })

• 接收参数

this.$route.params.id

• path方式跳转只能用 query传参
• name方式跳转，可以用query，也可以用params传参
  query （类似于get请求）
  params （类似于post请求）页面刷新数据消失