<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 聲明式導航用在直接渲染到頁面 編程式導航用於在js中處理邏輯后需要頁面進行跳轉 聲明式導航 <router-link to="/url"> 聲明式導航中的to怎么寫，那么編程式導航中的參數就怎么寫 this.$router.push() this.$router其實就是router，vue為了方便我們在組件中使用router，才添加了this.$router this.$router.push() 會進行頁面跳轉，同時會在歷史記錄上留下記錄 this.$router.replce() 和push功能相同，但是會替換當前頁出現在歷史記錄中 this.$router.go(num) 表示距離當前頁的在歷史記錄上的頁數 this.$router.back() 返回到上一頁 this.$router.forward() 前進到下一頁 next中參數寫法同push() --> <div id="app"> <router-link to="/url"></router-link> <router-link :to="{path: 'url'}"></router-link> <!-- 如果想要攜帶query參數 --> <router-link to="/url?a=1"></router-link> <router-link :to="'/url?a=' + a"></router-link> <router-link :to="{path: '/url', query: {a: 1}}"></router-link> <router-link :to="{name: 'u', params: {id: 1}}"></router-link> <button @click="handler">按鈕</button> </div> <script src="../vue.js"></script> <script src="../vue-router.js"></script> <script> const routes = [ { name: 'u', path: '/u/:id' } ] const router = new VueRouter({ routes }) const app = new Vue({ el: '#app', router, data: { a: 1 }, methods: { handler () { // this.$router.push({path: '/a', query: {a: 1}}) this.$router.push({name: 'u', params: {id: 1}}) // router.push('/') } } }) </script> </body> </html>