vue编程式路由

点击链接跳转到另一个页面,

<router-link to="/Cart">点击跳转到购物车页面</router-link>这里是绝对路径

在路由里要把路径写到routes的数组里

{
  path:'/Cart',
  component:Cart
}

同时也不要忘记引入

通过点击事件跳转另一个页面

<button @click="jump">编程式点击跳转到购物车页面</button>

export default {
    name: "GoodsList",
    methods:{
        jump(){
          this.$router.push("/Cart");//这里传递的是字符串,也可以是一个json对象,this.$router.push({path:'/Cart'});

        }
    }
}

如何在路径里传参呢?

this.$router.push({path:'/Cart?goodsId=123'});用问好连接

在商品详情页里如何接受呢

<span>{{$route.query.goodsId}}</span>

 

如何通过name值来传值呢

{
  path:'/Cart',
  name:'Cart',
  component:Cart,
}这是路由router里的代码,

这里是点击页面 <router-link v-bind:to="{name:'Cart'}">点击跳转到购物车页面2</router-link>

如果是动态路由,则需要传递一个params参数

path:'/Cart/:cartId',

<router-link v-bind:to="{name:'Cart',params:{cartId:123}}">点击跳转到购物车页面2</router-link>

命名视图

在index,js里

routes: [
  {
    path:'/',
    name:'GoodsList',
    components:{
      default:GoodsList,
      title:Title,
      img:Image
    }
  },
  {

在主页面里,有这3个版块

<router-view class="main"/>
<router-view class="left" name="title" ></router-view>
<router-view class="right" name="img"></router-view>