猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue 编程式路由

2018-01-15 16:15:07 作者:yxl 次阅读 vue

#### 一般在开发过程中呢,需要在代码中实现跳转,所以就有了编程式路由
 
> 比如在一个产品列表页面,点击一个按钮,然后跳转
 
```
//这里用了三种常用的跳转
//1.this.$router.push('/car')  使用的是字符串的形式
//2.this.$router.push({path:'/car',query:{'id':1}})  使用对象,参数用query对象传递
//3. this.$router.push({path:'/car?id=1'})  也是使用对象,但是路由参数也是用字符串拼接
<template>
  <div>
      这是商品列表页面
     <div>
          <button @click="jump">购物车</button>
     </div>
      
  </div>
</template>
<script>
export default {
  data(){
      return {
 
      }
  },
  methods:{
      jump(){
        //   this.$router.push('/car')
        // this.$router.push({path:'/car',query:{'id':1}})
        this.$router.push({path:'/car?id=1'})
      }
  }
}
</script>
<style>
 
</style>
 
 
```
 
> 购物车页面
 
```
//在购物车页面获取 参数可以使用 $route.query 获取。注意这里是$route 单个路由
//  前面 this.$router.pssh()  是$router 对象   
<template>
  <div>
      这是购物车页面
      <div>
          {{ $route.query.id }}
      </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
 
</style>
 
 
```

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论