vue 命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 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 命名路由的更多相关文章
- Vue命名路由
Vue命名路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue的路由设置
一.路由基础介绍 1.什么是前端路由? 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现 ...
随机推荐
- [转帖]关于 ./configure
./configure --prefix=/usr/local/scws --prefix选项是配置安装的路径,如果不配置该选项,安装后可执行文件默认放在/usr/local/bin,库文件默认放在/ ...
- [CF24A]Ring road(2019-11-15考试)
题目大意 给你一个\(n\)个点的环,每条边有方向,改变第\(i\)条边的方向代价为\(w_i\),问将其改为强连通图的最小代价.\(n\leqslant100\) 题解 求出把边全部改为顺时针和全部 ...
- Mysql——查看数据库,表占用磁盘大小
.查询所有数据库占用磁盘空间大小 select TABLE_SCHEMA, concat(,),' MB') as data_size, concat(,),'MB') as index_size f ...
- [转] js async await 终极异步解决方案
阅读目录 回顾 Promise async await 字面理解 async.await 如何执行 await 操作符 总结 既然有了promise 为什么还要有async await ? 当然是pr ...
- linux或者shell进入vi命令
vi的基本操作 a) 进入vi 在系统提示符号输入vi及文件名称后,就进入vi全屏幕编辑画面: $ vi file 不过有一点要特别注意,就是您进入vi之后,是处于「命令行模式(comman ...
- 版本控制器:Git-的使用
版本控制器:Git # 达到多人协同开发的目的 安装 """ 1.下载对应版本:https://git-scm.com/download 2.安装git:在选取安装路径的 ...
- 如何将一个div盒子水平垂直都居中?
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- 2. vue基础-vue-cli(vue脚手架)
1. 作用 快速创建一个基于webpack模板的项目 2. 安装工具 安装webpack:使用npm全局安装webpack,打开命令行工具,输入 npm install webpack -g,安装 ...
- Java学习之:Spring的扩展配置
1.在配置文件applicationContext.xml中,引入相关的配置文件方式: 2.使用Jndi数据源的方式改造配置文件applicationContext.xml: 3.注释配置文件appl ...
- java并发值多线程同步业务场景以及解决方案
1.20个人排队同时访问2个购票窗口,同时能购票的只有两个人,当其中一个人买票完成后,18个人中的其中一个在占用窗口进行购买. 20个人相当于20个线程,2相当于资源,当18个人等待的时候,相当于线程 ...