# 编程式跳转： 相当于打开新的页面 ``` this.$router.push('') ``` 案例： this.$router.push('/goods/detail') # 详情页：  ~~~ <template> <ul> <li @click="getGoods(goods.id)" v-for="(goods,index) in goodsList" :key="index">{{goods.name}}</li> </ul> </template> <script> export default { data:function(){ return{ goodsList:[ {id:1,name:'华为手机'}, {id:2,name:'小米手机'}, {id:3,name:'OPPO手机'}, ] } }, methods:{ getGoods:function (id){ this.$router.push('/goods/detail') } } } </script> <style scoped> </style> ~~~ # 路由文件：  ~~~ import Vue from 'vue' import VueRouter from 'vue-router' //引入页面 import Index from '../views/index' //引入页面 import Goods from '../views/Goods' //引入页面 import Detail from '../views/goods/Detail' import User from '../views/User' //引入页面 Vue.use(VueRouter) const routes = [ {path:'/', component:Index }, //页面导航 {path:'/goods', component:Goods }, { path:'/goods/detail', component: Detail, }, //页面导航 {path:'/user', component:User //页面导航 } ] const router = new VueRouter({ routes }) export default router ~~~ 详情子页 在views 文件夹下再创建一个文件夹这样不乱