第一种最简单的路由跳转
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>
<!-- Add
"scoped" attribute to limit CSS to this component only
-->
<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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - vue路由跳转的3种方法