簡要介紹

除了使用 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

語法：router.push(location, onComplete?, onAbort?)

注意：在 Vue 實例內部，你可以通過 $router訪問路由實例。因此你可以調用this.$router.push。

聲明式編程式

< router-link :to="…">	router.push(…)

該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。例如：

// 字符串
router.push(’/login’)
// 對象
router.push({ path: ‘/login’ })
// 帶查詢參數，變成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

示例：在注冊后，立刻導航到登錄

<div id="app"><router-link to="/login">登錄</router-link><router-link to="/register">注冊</router-link><hr><router-view></router-view> </div> <template id="login-form"><form action="">用戶名: <input type="text" name="username" > <br>密碼: <input type="password" name="pwd"> <br><input type="submit" value="登錄"></form> </template> <template id="register-form"><form action="" @submit.prevent="handleRegister">用戶名: <input type="text" name="username" > <br>密碼: <input type="password" name="pwd1"> <br>確認密碼: <input type="password" name="pwd2" > <br><input type="submit" value="注冊"></form> </template><script>const loginForm = {template:"#login-form"}const registerForm = {template:"#register-form",methods:{handleRegister(){alert("添加成功");this.$router.push({path:"/login"})}}}var router = new VueRouter({routes:[{name:"default",path:"/",redirect:"/login"},{name:"login",//路由名稱path:"/login",//路由路徑component:loginForm//要路由到的組件},{name:"register",path:"/register",component:registerForm}]});const vm = new Vue({el:"#app",components:{loginForm,registerForm},//router:router //如果路由變量名也叫router，則可以省略:routerrouter})</script>

實戰案例

登錄和注冊切換

案例代碼：

<div id="app"><router-view></router-view> </div> <template id="login-form"><form action="" @submit.prevent="handleLogin">用戶名: <input type="text" > <br>密碼: <input type="password"> <br><input type="submit" value="登錄"><router-link to="/register">注冊</router-link></form> </template> <template id="register-form"><form action="" @submit.prevent="handleRegister">用戶名: <input type="text" > <br>密碼: <input type="password" > <br>確認密碼: <input type="password" > <br><input type="submit" value="注冊"> <router-link to="/login">登錄</router-link></form> </template> <script>const loginForm = {template:"#login-form",methods:{handleLogin(){alert("登錄成功");location.href="https://www.baidu.com";}}};const registerForm = {template:"#register-form",methods:{handleRegister(){alert("注冊成功");this.$router.push("/login");}}};const router = new VueRouter({routes:[{path:"/",redirect:"/login"},{path:"/login",component:loginForm},{path:"/register",component:registerForm}]});const vm = new Vue({el:"#app",router}) </script>

增刪改查的切換

案例效果：

示例代碼：

<div id="app" ><div ><router-link to="/book/show"><button >查詢</button></router-link><router-link to="/book/add"><button >添加</button></router-link><hr><router-view></router-view></div> </div> <template id="my-table"><table border="1"><thead><tr><th>id</th><th>name</th><th>price</th><th>stock</th><th>operation</th></tr></thead><tbody><tr v-for="b in books" :key="b.id"><td>{{b.id}}</td><td>{{b.name}}</td><td>{{b.price}}</td><td>{{b.stock}}</td><td><button>刪除</button><router-link :to="{path:'/book/update',query:{id:b.id}}"><button>更新</button></router-link></td></tr></tbody></table> </template> <template id="add-form"><form action="">name: <input type="text" name="" id=""> <br>price: <input type="number" name="" id=""> <br>stock: <input type="number" name="" id=""> <br><input type="submit" value="添加"></form> </template> <template id="update-form"><form action=""><input type="hidden" name="">name: <input type="text" name="" id=""> <br>price: <input type="number" name="" id=""> <br>stock: <input type="number" name="" id=""> <br><input type="submit" value="更新"></form> </template> <script>const addForm = {template:"#add-form" }const updateForm = {template:"#update-form"};const myTable = {template:"#my-table",data(){return {books:[{id:1,name:"十萬個為什么",price:100000.0,stock:1},{id:2,name:"vue從入門到放棄",price:19800.0,stock:2}]}}}const router = new VueRouter({routes:[{path:"/book/show",component:myTable},{path:"/book/add",component:addForm},{path:"/book/update",component:updateForm},{name:"book",path:"/book/:id",component:updateForm}]});const vm = new Vue({el:"#app",router}) </script>

總結

以上是生活随笔為你收集整理的Vue第二部分(5)：编程式的路由导航和实战案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。