创建 Router 实例的时候,在 routes 配置中给某个路由设置名称

const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId:  }})

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

  1. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  2. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  3. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  4. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  5. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

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

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

  7. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  8. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  9. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  10. Vue命名路由

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

随机推荐

  1. CentOS 7系统安装配置图解教程

    操作系统:CentOS 7.3 备注: CentOS 7.x系列只有64位系统,没有32位.生产服务器建议安装CentOS-7-x86_64-Minimal-1611.iso版本 一.安装CentOS ...

  2. Python -- jpype JVM的第三方库使用

    Python -- jpype 安装 jpype 如图:直接执行 命令:pip install jpype 可见失败,提示没有版本信息 可以使用 pip  search jpype 查看相关版本信息 ...

  3. eslint简单的规范

    module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, // h ...

  4. php set_time_limit()的作用是什么

    php set_time_limit()用法测试 一.总结 一句话总结:在php中set_time_limit函数是用来限制页面执行时间的,如我想把一个php页面的执行时间定义为5秒就可以set_ti ...

  5. eclipse---->error and exception 和常用配置

    1.eclipse打开后报错:An internal error occurred during: "Initializing Java Tooling". java.lang.N ...

  6. Kaggle泰坦尼克数据科学解决方案

    原文地址如下: https://www.kaggle.com/startupsci/titanic-data-science-solutions --------------------------- ...

  7. English Voice of <<Dream it passible>>

    Dream It Possible(梦想成为可能) - DelaceyI will run I will climb I will soar.我奔跑,我攀爬 我要飞翔.I'm undefeated我所 ...

  8. docker 基本操作

    # 常用命令   docker run 镜像   docker images 查看所有镜像   docke ps  查看运行中的容器 docker ps -a 列出所有容器     docker st ...

  9. 23. Merge K Sorted Lists (Java, 归并排序的思路)

    题目:Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...

  10. 【PowerDesigner】【9】禁止Name与Code同步

    问题:修改了某个字段的name,其code也跟着修改 步骤:Tools→General Options..→Dialog→取消勾选“Name to Code mirroring”复选框 参考博客: 1 ...