精华内容
下载资源
问答
  • vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会...
  • vuerouter和route区别 1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。 ...

    vue中router和route的区别

    1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

    举例:history对象
    $router.push({path:‘home’});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录

    2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

    展开全文
  • $route是“路由信息对象”,...1 this.$router和this.$route区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当.

    $route是“路由信息对象”,是一个局部对象,其包含name、path、fullpath、params、query、hash、matched等路由信息。

    而$router“路由实例”,是一个全局对象,其包含了路由的跳转方法,钩子函数等。

    1 this.$router和this.$route的区别

    vue router

    this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。
    this.$route相当于当前激活的路由对象,包含当前url解析得到的数据,可以从对象里获取一些数据,如name,path等。

    2 路由跳转分为编程式和声明式

    声明式

    //路由入口
    <router-link :to="...">
    //视图出口
    <router-view></router-view>
    //路由入口
    <router-link :to="...">
    //视图出口
    <router-view></router-view>

    当你想在一个页面嵌套子路由,并且不跳转页面的时候,我觉得这个超好用啊,子页面就会渲染在router-view的地方

    编程式

    // 字符串
    router.push('home')
    // 对象
    router.push({ path: 'home' })
    // 命名的路由
    router.push({ name: 'user', params: { userId: '123' }})
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
    
    // 字符串
    router.push('home')
    // 对象
    router.push({ path: 'home' })
    // 命名的路由
    router.push({ name: 'user', params: { userId: '123' }})
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})

    但是一定要注意啊,如果你提供了path,那么params和query的配置就会被忽略的

    3 path:'name'和path:'/name'的区别

    如果加/则会被当作跟目录,否则当前的路径会嵌套在之前的路径中

    //比如当前路径是home
    this.$router.push({path:'name'})//==>path为/home/name
    this.$router.push({path:'/name'})//==>path为/name
    //比如当前路径是home
    this.$router.push({path:'name'})//==>path为/home/name
    this.$router.push({path:'/name'})//==>path为/name

    ps:下面看下vue中router与 router与route区别

    vue-router中经常会操作的两个对象route和 route和router两个。

    1、$route对象

    $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。1.$route.path**
        字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
    2.$route.params**
        一个 key/value 对象,包含了 动态片段 和 全匹配片段,
        如果没有路由参数,就是一个空对象。
    3.$route.query**
        一个 key/value 对象,表示 URL 查询参数。
        例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
        如果没有查询参数,则是个空对象。
    4.$route.hash**
        当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
    5.$route.fullPath**
        完成解析后的 URL,包含查询参数和 hash 的完整路径。
    6.$route.matched**
        数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
    7.$route.name    当前路径名字**
    8.$route.meta  路由元信息

    route object 出现在多个地方:

    •组件内的 this.route和 route和route watcher 回调(监测变化处理);
    •router.match(location) 的返回值
    •scrollBehavior 方法的参数
    •导航钩子的参数:

    router.beforeEach((to, from, next) => {
     // to 和 from 都是 路由信息对象,后面使用路由的钩子函数就容易理解了
    })

    2、$router对象

    $router对象是全局路由的实例,是router构造方法的实例。

    路由实例方法:

    1、push

    // 字符串
       this.$router.push('home')
    // 对象
       this.$router.push({ path: 'home' })
    // 命名的路由
       this.$router.push({ name: 'user', params: { userId: 123 }})
    // 带查询参数,变成 /register?plan=123
       this.$router.push({ path: 'register', query: { plan: '123' }})

    push方法其实和<router-link :to="...">是等同的。

    注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

    2、go

    // 页面路由跳转 前进或者后退
    this.$router.go(-1) // 后退

    3、replace

     //push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
     不会向 history 栈添加一个新的记录

    重定向 

    // 一般使用replace来做404页面

    this.$router.replace('/')

    配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径,就不会一直嵌套之前的路径。

    展开全文
  • vuerouterroute区别

    2021-01-04 20:49:46
    vue-router中经常会操作的两个对象route和router两个。 一、$route对象        $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。 $...


    前言

    vue-router中经常会操作的两个对象route和router两个。


    一、$route对象

           $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。

    在这里插入图片描述

    • $route.path 字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/bar"。

    • $route.params 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。

    • route.querykey/valueURL/foo?user=1route.query 一个 key/value 对象,表示 URL 查询参数。 例如,对于路径 /foo?user=1,则有route.query.user == 1, 如果没有查询参数,则是个空对象。

    • $route.hash 当前路由的hash值 (不带#) ,如果没有 hash 值,则为空字符串。锚点*

    • $route.fullPath 完成解析后的 URL,包含查询参数和hash的完整路径。

    • $route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

    • $route.name 当前路径名字

    • $route.meta 路由元信息

      导航钩子的参数:
      router.beforeEach((to,from, next)=>{//to 和from都是 路由信息对象,后面使用路由的钩子函数就容易理解了})

    二、$router对象

           $router对象是全局路由的实例,是router构造方法的实例。

    在这里插入图片描述
    路由实例方法:

    1、push

    • 字符串this.$router.push(‘home’)
    • 对象this.$router.push({path:‘home’})
    • 命名的路由this.$router.push({name:‘user’,params:{userId:123}})
    • 带查询参数,变成 /register?plan=123this.$router.push({path:‘register’,query:{plan:‘123’}}) push方法其实和是等同的。

    注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

    2、go

    • 页面路由跳转
    • 前进或者后退this.$router.go(-1) // 后退

    3、replace

    • push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
    • 不会向 history 栈添加一个新的记录

    4.一般使用replace来做404页面

    • this.$router.replace(’/’)
    • 配置路由时path有时候会加 ‘/’ 有时候不加,以’/'开头的会被当作根路径,就不会一直嵌套之前的路径。

    展开全文
  • 1.routerVueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象属性。 跳转路由$router.push({path...

    1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

    跳转路由$router.push({path:'home'});

    $router.replace({path:'home'});//替换路由,没有历史记录

    2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query

    展开全文
  • 1.routerVueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象属性。举例:history对象$router....
  • VueCliVue的router的理解routerroute区别VueCli怎么使用Router Vue的router的理解 我们要实现单页应用程序,所以我们要学习路由。 router能够帮助我们组件之间的跳转 下面我们看网易云音乐的例子 在头部栏有很...
  • 遗留问题 2020-11-25: router route区别; react中Router什么时候需要加,什么时候不需要加?
  • vue 的路由router 1.router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。 to:导航路径,要填写的是...route和router区别 $route是获取路由信息的一个对象 $route.path 字符串,
  • 文章目录$router$route $router 是配置vue-router的时候挂载的router对象 是VueRouter实例 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(vueRouter) const router = new VueRouter({ mode:'...
  • 1. nodejs中route和router的解析 Route对象的主要作用就是创建一个路由中间件,并且创建多个方法的layer保存到自己的stack数组中 Router对象的主要作用...2. Vue路由模块中$route和$router区别 $route中存储的...
  • 今天做项目时踩到了vue-router传参的坑(jqueryparams),所以决定总结一下二者的区别。 1.jquery方式传参接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route....
  • vue中router和router和router和route区别 我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器。之前也有被问到 router 相关的问题,今天闲来掰扯掰扯~~~:???? | this.$route:当前激活...
  • vue2.0 $router和$route区别

    万次阅读 2017-12-24 17:17:35
    vue2.0 $router和$route区别
  • routerVueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象属性。 路由实例方法: 1、push 1....
  • route和route和routerouter区别 $route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 $router是“路由实例”对象包括了路由的跳转方法,钩子函数等 vue和...
  • 一、routerVueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。。。 this.$router.push会往...
  • P13.11-VueRouter路由$route和$router区别 1.概述 $route和$router区别总结 $routerVueRouter实例,想要导航到不同URL,则使用$router.push方法 $route为当前router跳转对象里面可以获取name、path、query、...
  • router route区别

    2020-11-25 10:53:02
    routerVueRouter的实例,是一个全局的路由对象,它包含了所有的路由许多关键的对象属性。 route是当前正在跳转的路由对象,是一个局部路由对象。里面包含当前路由的信息,比如:name,path,params,query等 ...
  • 1.query方式传参和接受参数 传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数: this.$route.query.id ...注意:传参是this.router,接收...this.router 和this.router和this.route区别: ro
  • routerVueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性子对象,例如history对象如下图,像是跳转路由this.$router.push() 二;route route相当于当前正在跳转的路由对象。。可以从里面获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 382
精华内容 152
关键字:

router和route区别vue

vue 订阅