一、
-
通过JavaScript实现页面跳转
-
相关函数
-
$router.push(“name”);
-
$router.push({path:”name”});
-
$router.push({path:”name”?a=123}); //传参
-
$router.push({path:”name”,query:{a=123}});
-
$router.go();
-
参数查询:$router.query.[参数名]
二、代码展示
- 目录结构
cart.vue
<template>
<div>这里是购物车
<span>{{$route.query.a}}</span>
</div>
</template>
goods.vue
<template>
<div>
商品列表
<router-link to="/goods/title">标题</router-link>
<router-link to="/goods/img">图片</router-link>
<div>
<router-view>
</router-view>
</div>
<button @click="toCart">去购物车</button>
</div>
</template>
<script>
export default {
methods:{
toCart(){
//this.$router.push("/carts");
//this.$router.push({path:"/carts"});
this.$router.push({path:"/carts?a=123"});
}
}
}
</script>
<style>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'
import Title from '@/Goodlists/title'
import Img from '@/Goodlists/img'
import Cart from '@/Goodlists/cart'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'Goodlists',
component: Goodlists,
children:[
{
path:'title',
name:'title',
component:Title
},
{
path:'img',
name:'img',
component:Img
}
]
},
{
path:'/carts',
name:'carts',
component:Cart
}
]
})