vue.js使用select跳转页面

佚名 7年前 (2019-05-07) 随笔 439人围观抢沙发百度已收录

<div id="app">
    <select v-model="selected" @change="changeHref(parseInt(selected))"> 
      <!--selected需转换成数值型，否则不会响应-->
        <option value="1">第一张</option>
        <option value="2">第二张</option>
        <option value="3">第三张</option>
    </select>
</div>

<script>
export default {
  data(){
    return {
      selected:1, 
    }
  },
  methods:{
    changeHref:function(sortnum){
      switch(sortnum){
        case 1:
        this.$router.push({
          path:"/cityArea"
        });
        break;
        case 2:this.$router.push({
          path:"/otherArea"
        });
        break;

　　　　　case 3:this.$router.push({
          path:"/otherArea"
        });
        break;

} } } }; </script>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

router.js   二级路由的引入，写的不详细，重点是跳转
import cityArea from '@/views/home/cityArea.vue'
import otherArea from '@/views/home/otherArea.vue'
const routes = [

 { 
  	 path: '/',
  	 component: Home,
  	  children: [
  	    {
          path: '/cityArea',
          component: cityArea
        },
        {
          path: '/otherArea',
          component: otherArea
        },

  	  ]
   },
]