当前位置：
首页 >
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
发布时间：2025/4/16
47
豆豆
生活随笔
收集整理的这篇文章主要介绍了
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
页面导航的两种方式
vue-router编程式导航
编程式导航基本用法
<!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><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><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">跳转到注册页面</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)}}}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则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 }]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body> </html>router.push() 方法的参数规则
《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读总结
以上是生活随笔为你收集整理的页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： vue-router命名路由
- 下一篇： Vue 单文件组件||Vue 单文件组件