有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 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. C编程遇到的一些小细节

    1  typedef int ElemType  -->  typedef int ElemType; 此处要加分行(:),要区别  #defin a 20 此处不需要加分号:#define是预 ...

  2. Java学习:内部类的概念于分类

    内部类的概念于分类 如果一个事物的内部类包含另一个事物,那么这就是一个类内部包含另一个类.例如:身体和心脏的关系,又如:汽车和发动机的关系. 分类 成员内部类 局部内部类(包含匿名内部类) 成员内部类 ...

  3. MQTT --- 操作行为

    会话状态 为实现QoS等级1和QoS等级2协议流,客户端和服务端需要将状态与客户标识符相关联,这被称为会 话状态.服务端还将订阅信息存储为会话状态的一部分.会话可以跨越一系列的网络连接.它持续到最新的 ...

  4. 阿里云服务器连接ftp服务(软件的使用)

    首先你需要有一个阿里云的ECS服务器 开通了宽带之后,ECS服务器就可以上网了 可以在本地电脑cmd控制台运行mstsc.exe启动远程桌面连接 windows+R 计算机名输入ECS服务器的公网ip ...

  5. 【转】Apache的架构师们遵循的30条设计原则

    本文作者叫Srinath,是一位科学家,软件架构师,也是一名在分布式系统上工作的程序员. 他是Apache Axis2项目的联合创始人,也是Apache Software基金会的成员. 他是WSO2流 ...

  6. 八.软件自动化和web测试

    1.软件自动化测试 1.1  自动化测试的概念   自动化测试:就是通过测试工具或其他手段,按照测试工程师的预定计划对软件产品进行自动化的测试   软件测试自动化涉及到测试流程.测试体系.自动化编译以 ...

  7. Mysql之视图和事务(五)

    一:视图 1.问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定 ...

  8. MySQL之SQL演练(四)

    一:准备数据 1.创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" ...

  9. Java自学-异常处理 Throwable

    Java Throwable类 步骤 1 : Throwable Throwable是类,Exception和Error都继承了该类 所以在捕捉的时候,也可以使用Throwable进行捕捉 如图: 异 ...

  10. MAC电脑下Appium + python3 + robotframework ios的真机测试环境搭建

    本人的环境搭建前的准备,MAC电脑一台(macOS Mojave 10.14.0及以上),Xcode 10.0及以上   ,自己注册的一个Apple ID 账户,必须你的电脑能连接互联网,最好不要用公 ...