命名路由的配置规则

为了更加方便的表示路由的路径,可以给路由规则起一个别名, 即为“命名路由”。

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

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

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

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

  2. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

  4. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  5. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  6. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

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

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

  8. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

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

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

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

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

随机推荐

  1. ReflectionUtils.invokeMethod的作用

    Object invokeMethod(Method method, Object target, Object... args)在指定对象(target)上,使用指定参数(args),执行方法(me ...

  2. (谷歌浏览器)前端以FormData类形成表单(含文件),通过ajax提交,PHP后端$_POST数组为空

    [错误信息] PHP获取不到前端发来的POST数据 [前端代码] [HTTP请求] [后端报错]

  3. Go基础编程实践(九)—— 网络编程

    下载网页 package main import ( "io/ioutil" "net/http" "fmt" ) func main() ...

  4. Selenium+Java(八)Selenium下拉框处理

    Selenium定位下拉框中的元素与普通元素定位有所不同,下面介绍三种定位下拉框元素的方法. 下拉款HTML代码如图所示: 一.通过text定位 //获取下拉框对象 Select city = new ...

  5. Java核心技术梳理-IO

    一.引言 IO(输入/输出),输入是指允许程序读取外部数据(包括来自磁盘.光盘等存储设备的数据).用户输入数据.输出是指允许程序记录运行状态,将程序数据输出到磁盘.光盘等存储设备中. IO的主要内容包 ...

  6. vue-如何清除下拉框选择数据

      清除前   清除后   在选择select标签里加一个属性clearable便可实现该效果.

  7. C# 运行流程

    转载  https://www.cnblogs.com/qcloud1001/p/9816956.html 从编译原理说起 一句话介绍编译器:编译器是将用某种程式语言写成的源代码(源语言),转换成另一 ...

  8. C#实现AES加密解密

    AES   AES 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法 Rijndael(读作rain-dahl)是由美 ...

  9. fulltext全文索引的使用

    Fulltext全文索引 Fulltext相关属性 查看数据库关于fulltext的配置 SHOW VARIABLES LIKE 'ft%'; -- ft就是FullText的简写 ft_boolea ...

  10. Python 第三方日志框架loguru使用

    解决中文乱码问题 项目地址 github: https://github.com/Delgan/loguru 文档:https://loguru.readthedocs.io/en/stable/in ...