关注前端 | 前端博客
当前位置: VUE > vue路由跳转的3种方法

vue路由跳转的3种方法

2018-12-28 分类:VUE 作者:管理员 阅读(1461)

第一种最简单的路由跳转

router-view 实现路由内容的地方,引入组件时写到需要引入的地方
需要注意的是,使用vue-router控制路由则必须router-view作为容器。
router-link to='需要跳转到的页面的路径
浏览器在解析时,将它解析成一个类似于a的标签。
别忘记给需要跳转的路径在需要提前在router/index.js下引入

vue中路由配置好对应的组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import GoodsList from '@/components/GoodsList'
import GoodsDetail from '@/components/GoodsDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
     {
      path: '/GoodsList',
      name: 'GoodsList',
      component: GoodsList
    },
     {
      path: '/GoodsDetail',
      name: 'GoodsDetail',
      component: GoodsDetail
    }
  ]
})
router-link标签的to
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="goods-list">
    <h1>商品列表<h1>
    <router-link to="GoodsDetail">第一种最简单的路由跳转 </router-link>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data () {
    return {
     
    }
  },
  methods: {
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

第二种this.$router.push()

路由跳转传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div class="goods-list">
    <button @click="change">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data () {
    return {
      id:1,
      name:'xiaoming',
      age:27
    }
  },
  methods: {
    change(){
      this.$router.push({  //核心语句
        path:'/GoodsDetail',   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ,作用时传递参数
          id:this.id ,
          name:this.name,
          age:this.age  
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

用法

第三种this.$router.replace()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div class="goods-list">
    <button @click="change">商品列表</button>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data () {
    return {
      id:1,
      name:'xiaoming',
      age:27
    }
  },
  methods: {
    change(){
      this.$router.replace({  //核心语句
        path:'/GoodsDetail' ,  //跳转的路径
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - vue路由跳转的3种方法

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线