Vue的路由配置

设置路由界面router.js
import 和 设置 routes

import Vue from 'vue'
import vuerouter from 'vue-router'
import firstpage from '../components/routerpage/index'
import active from '../components/routerpage/active.vue'
let router=new vuerouter({
    mode:"history",
    routes:[
        //配置路由
        {
            path:"/",
            name:"firstpage",
            component:firstpage
        },{
            path:"/active",
            name:"active",
            component:active
        }
    ]
});
Vue.use(vuerouter);
export default router;

对应action

{
          title: "电影",
          img: "../../../public/img/ymiao.png",
          activeimg: "../../../public/img/miao.png",
          action: "/",
          useractive: true
        },
        {
          title: "活动",
          img: "../../../public/img/yshu.png",
          activeimg: "../../../public/img/shu.png",
          action: "/active",
          useractive: false
        },

设置routerlink

  <router-link :to="item.action">
          <img class="img" :src="`public/img/${item.useractive?item.img:item.activeimg}`" alt="">
          <br>
          {{item.title}}</router-link>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值