Vue中$router与 $route的区别详解

 更新时间:2022年09月02日 14:48:54   作者:mochenxiya  
这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3利用keepAlive缓存页面实例详解

    vue3利用keepAlive缓存页面实例详解

    <keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下
    2022-11-11
  • React和Vue实现路由懒加载的示例代码

    React和Vue实现路由懒加载的示例代码

    路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    这篇文章主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue 组件prop验证作用示例解析

    vue 组件prop验证作用示例解析

    这篇文章主要为大家介绍了vue组件prop验证作用示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue实现文件批量打包压缩下载

    Vue实现文件批量打包压缩下载

    这篇文章主要为大家详细介绍了如何利用Vue实现文件批量打包压缩下载功能,文中的实现步骤讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-07-07
  • 详解Vue 单文件组件的三种写法

    详解Vue 单文件组件的三种写法

    这篇文章主要介绍了详解Vue 单文件组件的三种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 默认浏览器设置及vue自动打开页面的方法

    默认浏览器设置及vue自动打开页面的方法

    今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3使用customRef封装防抖函数的方法详解

    Vue3使用customRef封装防抖函数的方法详解

    防抖函数的作用是高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间,本文将给大家详细的介绍一下Vue3使用customRef封装防抖函数的方法,需要的朋友可以参考下
    2023-09-09
  • Vue 2源码阅读 Provide Inject 依赖注入详解

    Vue 2源码阅读 Provide Inject 依赖注入详解

    这篇文章主要为大家介绍了Vue 2源码阅读 Provide Inject 依赖注入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue v-model的详细讲解(推荐!)

    vue v-model的详细讲解(推荐!)

    vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论