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编程式导航相关推荐
- 页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航 编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
- Vue.js-Day05【安装路由(vue-router)、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
- vue-router详尽:编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template><div class="goods-item" ...
- 声明式导航编程式导航
声明式导航:在浏览器中,点击链接实现导航的方式,叫做声明式导航.如:普通网页中点击<a>链接,vue中点击<router--link>都属于声明式导航. 编程式导航:在浏览器中 ...
- 前端笔记(11) Vue3 Router 编程式导航 router.push router.replace
什么是编程式导航? 在上篇博客Vue3 Router 监听路由参数变化中,我们使用 <router-link> 创建 a 标签来定义导航链接: <router-link to=&qu ...
- Vue页面与页面之间的传值(router.push()编程式导航)
页面与页面之间跳转传值,其实我们一般用两种,query传参或者用params 其实这两个方式都是页面导航的一种,编程式导航:通过调用JavaScript形式的API实现导航的方式,大家不了解的可以去官 ...
- vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调 解决方法 只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...
- Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法
路由跳转有以下两种方式: 1.声明式导航: router-link,需要to属性,可以实现路由的跳转 2.编程式导航: 利用的是组件的实例 $route.push|replace 方法,可以实现路由的 ...
最新文章
- php zval_copy_static_var(),深入理解 PHP7 中全新的 zval 容器和引用计数机制
- 重构—改善既有代码的设计
- stm32c语言写数码管定时器,使用TIM1产生1秒定时控制数码管显示0-9(STM32_10)
- Facebook已经过时,蜂巢新网络崛起
- 异常已存在具有相同键的条目。_灵敏度高,却已停产——山进PR-D3Plus DX收音机评测...
- verilog实现多周期处理器之——(一)基本概念以及总体框架
- 微软最强命令行工具发布,强势霸榜GitHub
- 自然语言理解gpt_GPT-3:自然语言处理的创造潜力
- Java如何使用IP代理
- java随便打数求质数_java随便输入一个数判断是不是质数
- Play 1.x 学习资料汇总
- 蒲丰投针问题的matlab仿真
- 使用BloomFilter布隆过滤器解决缓存击穿、垃圾邮件识别、集合判重
- 从GPU编程到SIMT核心
- ROS基础篇(二)-- 基础知识
- PROFIBUS远程IO在加工车间的应用
- Bad key in file You probably need to get an updated matplotlibrc file from https://github.com/matplo
- SpringSecurity-02-基于前后端分离和JWT载体的认证授权
- 西北陕甘宁地区有影响力的调查研究咨询公司
- 如何切换中英文输入法及全角/半角?(原创)