【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别
this.$route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的 path,
name, params, query 等属性。
this.$router:全局的 router 实例。通过 vue 根实例中注入 router 实例,然后再注入到每个
子组件,从而让整个应用都有路由功能。其中包含了很多属性和对象(比如 history 对象),任何
页面也都可以调用其 push(), replace(), go() 等方法。
路由跳转分为编程式和声明式
声明式:
简单来说,就是使用 router-link 组件来导航,通过传入 to 属性指定链接(router-link 默认会被渲染成一个a标签)。
编程式:
采用这种方式就需要导入 VueRouter 并调用了。
src\router\index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 1. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [
{ path: '/home', component: ()=> import('../views//home.vue') },
{ path: '/about', component: ()=> import('../views/about.vue') },
]
const router = new VueRouter({
// mode: 'hash', //默认是hash模式,url是带#号的
mode: 'history', //history模式url不带#号
routes
})
export default router
src\views\home.vue
<template>
<div id="app">
<h1>home</h1>
<button @click="handerHerf">跳转</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
components:{
},
methods:{
handerHerf(){
console.log('this.$router',this.$router)
this.$router.push('/about')
}
}
}
</script>
<style scoped>
</style>
src\views\about.vue
<template>
<div>
<h1>about</h1>
</div>
</template>
<script>
export default {
name: 'about',
data(){
return {
}
},
created(){
console.log('this.$route',this.$route)
},
mounted() {
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
this.$router参数详情
this.$route参数详情
【面试题】Vue中的$router 和 $route的区别的更多相关文章
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- vue中的router和route有什么区别?
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- vue2.0中的$router 和 $route的区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了 ...
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- 浅谈vue$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- Vue中this.$router.push(参数) 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
随机推荐
- iNeuOS工业互联网操作系统,在线报表(Excel)开发工具
目 录 1. 概述... 2 2. 视频介绍... 2 3. 应用过程... 2 1. 概述 iNeuOS工业互联网操作系统在线报表(Excel)工具的开 ...
- SRE,了解一下?35+岁程序员新选择
摘要:随着云业务的发展,今后会有越来越多的工程师深入到SRE领域. 本文分享自华为云社区<浅谈SRE角色认知>,作者: SRE确定性运维. 一.什么是SRE? SRE(Site Relia ...
- .Net Core 企业微信更新模版卡片消息
1.搭建回调服务器 可参考:https://www.cnblogs.com/zspwf/p/16381643.html进行搭建 2.编写代码 2.1接口定义 应用可以发送模板卡片消息,发送之后可再通过 ...
- Node.js精进(4)——事件触发器
Events 是 Node.js 中最重要的核心模块之一,很多模块都是依赖其创建的,例如上一节分析的流,文件.网络等模块. 比较知名的 Express.KOA 等框架在其内部也使用了 Events 模 ...
- Redis系列2:数据持久化提高可用性
1 介绍 从上一篇的 <深刻理解高性能Redis的本质> 中可以知道, 我们经常在数据库层上加一层缓存(如Redis),来保证数据的访问效率. 这样性能确实也有了大幅度的提升,但是本身Re ...
- UiPath Excel修改操作
一.Excel 修改操作 1.删除行 (1)控件介绍 Insert/Delete Rows: 在特定位置添加或删除指定数量的行 常用属性介绍: Destination: NoRows: ...
- [零基础学IoT Pwn] 复现Netgear WNAP320 RCE
[零基础学IoT Pwn] 复现Netgear WNAP320 RCE 0x00 前言: 这是[零基础学IoT Pwn]的第二篇,上篇我们搭好了仿真环境后,模拟运行了Netgear WNAP320固件 ...
- Mybatis-Generator 自定义注释
继承DefaultCommentGenerator 或者CommentGenerator package com.zhianchen.mysqlremark.toword.config;import ...
- day03_1_idea教程
# idea使用教程 # 一.idea相关概念介绍 ## 1.1 IDE概念介绍 集成开发环境(IDE,Integrated Development Environment)是用于提供程序开发环境的应 ...
- Mpvue1.0+Python3.7+Django2.0.4实现微信小程序的支付功能
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_112 其实微信支付有很多种形式,刷脸,扫码,APP支付,小程序支付等,这边只说明小程序支付的实现,不过原理上都大同小异. 首先,需 ...