To那一边怎么什么都没传到
跳转前：
跳转后：
相关代码：
GoodsList.vue
<template>
<div class="goods-list">
<div class="goods-item" v-for="item in goodslist" :key="item.id">
<a href="#">
<img src="item.image" alt="">
<h1 class="title">{{item.name}}</h1>
<p class="info">
<span class="price">
￥{{item.price}}
</span>
<span class="sell">
剩余{{item.num}}件
</span>
</p>
</a>
</div>
<mt-button class="more" v-if="goodslist.length !== 0" size='large'>加载更多</mt-button>
</div>
</template>
<script>
export default {
props: ['category_id'],
data () {
return {
goodslist: []
}
},
created() {
},
mounted() {
},
methods: {
getGoodsList() {
console.log(this.category_id);
this.$indicator.open({ text: '加载中...' })
const params = { category_id: this.category_id }
// 发送请求获取分类id对应的商品列表
this.$http.get('goodslist', { params: params }).then(res => {
this.$indicator.close()
if (res.data.code === 1) {
if (res.data.data.length > 0) {
// concat方法的作用是将参数拼接到数组里面，返回一个新的数组(包含数组原有的数据和)
this.goodslist = this.goodslist.concat(res.data.data)
} else {
this.$toast('暂无数据')
}
}
})
}
}
}
</script>
_index.js(路由_
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import Category from '../pages/Category.vue'
import Shopcart from '../pages/Shopcart.vue'
import User from '../pages/user.vue'
import Login from '../pages/user/login.vue';
import Register from '../pages/user/Register.vue'
import GoodsList from '../pages/goodslist/GoodsList.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/home'
}, {
path: '/home',
component: Home,
meta: { title: '首页' }
}, {
path: '/category',
component: Category,
meta: { title: '分类' }
}, {
path: '/shopcart',
component: Shopcart,
meta: { title: '购物车' }
}, {
path: '/user',
component: User,
meta: { title: '我的' }
}, {
path: '/user/login',
component: Login,
meta: { title: '登录' }
}, {
path: '/user/register',
component: Register,
meta: { title: '注册' }
}, {
path: '/goodslist/GoodsList/:category_id',
component: GoodsList,
props: true,
meta: { title: '商品列表' }
}
]
const router = new VueRouter({
routes,
// 给当前的路由去添加一个类名
linkActiveClass: 'mui-active'
})
// 添加路由导航守卫，用来动态设置标题内容
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
export default router
App.vue
<template>
<div id="app">
<div class="container">
<mt-header fixed :title="$route.meta.title">
<span slot="left" v-show="showBack" @click="goBack">
<mt-button icon="back">返回</mt-button>
</span>
</mt-header>
<transition name='fade'>
<router-view></router-view>
</transition>
<tabber></tabber>
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.container{
padding-top: 40px;
padding-bottom: 50px;
overflow-x: hidden;
}
.fade-enter {
opacity: 0;
transform: translateX(100%)
}
.fade-leave-to {
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition:all .8s ease;
}
</style>
<script>
// 导入tabbar.vue
import tabber from './components/tabbar.vue'
export default {
data () {
return {
showBack: false
}
},
created () {
// 判断是否为首页
this.showBack = this.$route.path !== '/home'
this.checkLogin()
},
methods: {
goBack () {
// 通过go方法退后一个访问页面
this.$router.go(-1)
},
checkLogin() {
this.$http.get('user').then(res => {
if (res.data.code === 1) {
// 如果用户已经登录了，那么就将用户信息保存到vuex中
this.$store.commit('user/setUser', res.data.data)
}
})
}
},
watch: {
'$route.path' (newVal) {
this.showBack = newVal !== '/home'
}
},
components: {
tabber
}
}
</script>
