欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

031_vue编程式导航

发布时间：2025/5/22 vue 70 豆豆
生活随笔 收集整理的这篇文章主要介绍了 031_vue编程式导航 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 页面导航的两种方式

1.1. 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航。例如: 普通网页中的<a></a>链接或vue中的<router-link></router-link>。

1.2. 编程式导航: 通过调用JavaScript形式的API实现导航的方式, 叫做编程式导航。例如: 普通网页中的location.href。

1.3. vue中的编程式导航

1.3.1. this.$router.push('hash地址');

1.3.2. this.$router.go(n);

1.4. router.push()方法的参数规则

// 路径名称 router.push('/user'); // 对象路径 router.push({path: '/user'}); // 命名路由传递参数 router.push({name: '/user_alias', params: {id: 1}}); // 带查询参数, 变成/user?uname=lisi router.push({path: '/user', query: {uname: 'lisi'}});

1.5. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>编程式导航</title></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_alias', params: {id: 3} }">User3</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script src="vue-router_3.0.2.js"></script><script type="text/javascript">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/3' },{ // 命名路由name: 'user_alias',path: '/user/:id', component: user, props: route => ({ uname: 'zs', age: 20, id: route.params.id }) },{ path: '/register', component: register }]});var vm = new Vue({el: "#app",router: router});</script></body> </html>

1.6. 效果图

总结

以上是生活随笔为你收集整理的031_vue编程式导航的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。