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

  	  ]
   },
]