有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 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. ubuntu 17.04 下搭建深度学习环境

    .目前使用CPU即可,先不需要显卡配置 .使用pip3 安装深度学习框架 .要先安装pip3 #sudo apt install python3-pip https://blog.csdn.net/b ...

  2. Python3注解+可变参数实现

    一.说明 1.1 关于注解 关于注解这个东西,最早是在大学学java的时候经常会看到某些方法上边@override之类的东西,一方面不知道其作用但另一方面似乎去掉也没什么影响,所以一直都不怎么在意. ...

  3. jquery.i18n.properties前端国际化方案

    如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...

  4. element-ui时间选择器--设置禁止选择的时间

    场景需求:开始日期不能小于今天,在今天之前的日期禁止选择,结束日期不能小于开始日期,开始日期之前的日期禁止选择. 效果图: element-ui的时间选择器中,有一个picker-options的属性 ...

  5. [转帖]美团在Redis上踩过的一些坑-5.redis cluster遇到的一些问题

    美团在Redis上踩过的一些坑-5.redis cluster遇到的一些问题 博客分类: redis 运维 redis clustercluster-node-timeoutfailover  转载请 ...

  6. Springboot Actuator之十一:actuator transaction

    前言spring boot 的自动化配置其实就是在spring 的基础上做的封装,在我们之前对mvc,aop的自动化配置中可以发现–> 只是在spring 的基础上添加了一些特性,可以认为只是一 ...

  7. Go语言【数据结构】切片

    切片 简介 简单地说,切片就是一种简化版的动态数组.Go 数组的长度不可改变,而切片长度是不固定,切片的长度自然也就不能是类型的组成部分了.数组虽然有适用它们的地方,但是数组的类型和操作都不够灵活,因 ...

  8. vim替换字符串

    1. s 命令来替换字符串 :s/vivian/sky/ #替换当前行第一个 vivian 为 sky :s/vivian/sky/g #替换当前行所有 vivian 为 sky :n,$s/vivi ...

  9. Linux 下的7种文件类型

    普通文件类型 (-)Linux中最多的一种文件类型, 包括 纯文本文件(ASCII):二进制文件(binary):数据格式的文件(data);各种压缩文件.第一个属性为 [-] ,这些文件一般是用一些 ...

  10. LaTeX的安装并使其能够编译中文

    首先,感谢博客园团队帮我找回这篇被我误删除的博客.找回方法:发送邮件至"contact@cnblogs.com",然后就可以在工作人员的帮助下找回了.下面介绍LaTeX的安装并使其 ...