當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则

發(fā)布時(shí)間：2025/4/16 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

頁面導(dǎo)航的兩種方式

vue-router編程式導(dǎo)航

編程式導(dǎo)航基本用法

<!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><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script>const User = {props: ['id', 'uname', 'age'],template: `<div><h1>User 組件 -- 用戶id為: {{id}} -- 姓名為:{{uname}} -- 年齡為：{{age}}</h1><button @click="goRegister">跳轉(zhuǎn)到注冊頁面</button></div>`,methods: {goRegister() {this.$router.push('/register')}},}const Register = {template: `<div><h1>Register 組件</h1><button @click="goBack">后退</button></div>`,methods: {goBack() {this.$router.go(-1)}}}// 創(chuàng)建路由實(shí)例對(duì)象const router = new VueRouter({// 所有的路由規(guī)則routes: [{ path: '/', redirect: '/user' },{// 命名路由name: 'user',path: '/user/:id',component: User,props: route => ({ uname: 'zs', age: 20, id: route.params.id })},{ path: '/register', component: Register }]})// 創(chuàng)建 vm 實(shí)例對(duì)象const vm = new Vue({// 指定控制的區(qū)域el: '#app',data: {},// 掛載路由實(shí)例對(duì)象// router: routerrouter})</script></body> </html>

router.push() 方法的參數(shù)規(guī)則

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。