# 編程式跳轉： 相當于打開新的頁面 ``` 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 文件夾下再創建一個文件夾這樣不亂