vue路由跳转的3种方法

2018-12-28 分类：VUE 作者：管理员阅读（3301）

第一种最简单的路由跳转

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

vue中路由配置好对应的组件

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

<template>
<div class="goods-list">
<h1>商品列表<h1>
<router-link to="GoodsDetail">第一种最简单的路由跳转 </router-link>
</div>
</template>

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

}
},
methods: {

}
}
</script>


<style scoped>

</style>

第二种this.$router.push()

路由跳转传参

<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>


<style scoped>

</style>

第三种this.$router.replace()

<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>


<style scoped>

</style>

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

赞(5) 打赏