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