有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。

const router = new VueRouter({

routes: [

{

path: '/user/:userId',

name: 'user',

component: User

}

]

})

要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 是一回事:

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

https://router.vuejs.org/zh/guide/essentials/named-views.html

vue 命名路由的更多相关文章

  1. Vue命名路由

    Vue命名路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  3. vue路由--命名路由

    有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...

  4. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  5. VUE进阶(路由等)

    初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...

  6. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  7. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  9. Vue的路由设置

    一.路由基础介绍 1.什么是前端路由? 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现 ...

随机推荐

  1. php 求商数和余数 的函数

    //返回两数相除之商和余数function get_div_and_mod($left_operand, $right_operand){ $div = intval($left_operand / ...

  2. .NET下使用HTTP请求的正确姿势

    来源:Lewis.Zou cnblogs.com/modestmt/p/7724821.html 一.前言 去年9月份的时候我看到过外国朋友关于.NET Framework下HttpClient缺陷的 ...

  3. APIO2019简要题解

    Luogu P5444 [APIO2019]奇怪装置 看到这种题,我们肯定会想到\((x,y)\)一定有循环 我们要找到循环节的长度 推一下发现\(x\)的循环节长为\(\frac{AB}{B+1}\ ...

  4. Linux中的数据重定向

    重定向即指:将数据传送输出到别的地方,如设备.文件等等.那就涉及到将什么数据传送到什么地方的问题. 在linux中命令执行的起源和结果说起,看下图: Standard input和Standard e ...

  5. SQL系列(十)—— 联结(join)

    在数据库设计中,基本上都是根实体ER关系和范式设计多张表.这样更能设计出更合理.紧凑的表结构,提高有效数据存储,数据的管理维护更简便,也提高了库表的伸缩性. 但是事物总是平衡的,在很多场景中单张表的数 ...

  6. 浅谈maven setting.xml 设置的mirrorof标签作用。

    https://blog.csdn.net/whbing1471/article/details/53983779 A 看这一段 背景:写好的java项目放置到linux服务器上进行编辑的时候,由于m ...

  7. C#生成/调用动态链接库

    参考地址:https://www.cnblogs.com/qq4004229/archive/2013/01/30/2882409.html 一.需求描述 (1)用代码生成动态链接库 (2)用C#代码 ...

  8. Spring MVC 复习

    概念 三层架构 将整个业务应用划分为三层 ​ 表现层:用来和客户端进行数据交互,一般采用MVC设计模式 ​ 业务层:处理公司具体业务逻辑 ​ 持久层:用来操作数据库 MVC模型 Model View ...

  9. 2019 珍岛java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.珍岛等公司offer,岗位是Java后端开发,因为发展原因最终选择去了珍岛,入职一年时间了,也成为了面试官,之 ...

  10. Mybatis源码解析(二) —— 加载 Configuration

    Mybatis源码解析(二) -- 加载 Configuration    正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config. ...