vue.js使用select跳转页面

<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>

　　

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
        },

  	  ]
   },
]

　　

转载于:https://www.cnblogs.com/chr506029589/p/10826057.html