路由url传值
来源:互联网 发布:数据挖掘原理 david 编辑:程序博客网 时间:2024/06/03 23:41
router.js
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode:'history', base:__dirname, routes: [ {path:'/'}, {path:'/params/:aaa/:bbb'}, {path:'/params-regex/:id(\\d+)'} ]})在vue中冒号( : )指代绑定的意思,路径path中参数可以使用正则进行匹配,如上述id(\\d+)只能识别数字,如果传入参数非数字,则params中不会有id参数
App.vue
<template> <div id="app"> <h1>路由url传值</h1> <ul> <li><router-link to="/">/</router-link></li> <li><router-link to="/params/111/222">/params/111/222</router-link></li> <li><router-link to="/params-regex/333">/params-regex/333</router-link></li> </ul> <p>Show</p> <pre> <code> {{ JSON.stringify($route,null,2) }} </code> </pre> </div></template>
npm run dev 运行项目
结果为:
路由url传值
- /
- /params/111/222
- /params-regex/333
Show
{ "meta": {}, "path": "/", "hash": "", "query": {}, "params": {}, "fullPath": "/", "matched": [ { "path": "", "regex": { "keys": [] }, "components": {}, "instances": {}, "meta": {}, "props": {} } ]}
点击:‘/’: { "meta": {}, "path": "/", "hash": "", "query": {}, "params": {}, "fullPath": "/", "matched": [ { "path": "", "regex": { "keys": [] }, "components": {}, "instances": {}, "meta": {}, "props": {} } ]}
点击:'/params/111/222' { "meta": {}, "path": "/params/111/222", "hash": "", "query": {}, "params": { "aaa": "111", "bbb": "222" }, "fullPath": "/params/111/222", "matched": [ { "path": "/params/:aaa/:bbb", "regex": { "keys": [ { "name": "aaa", "prefix": "/", "delimiter": "/", "optional": false, "repeat": false, "partial": false, "asterisk": false, "pattern": "[^\\/]+?" }, { "name": "bbb", "prefix": "/", "delimiter": "/", "optional": false, "repeat": false, "partial": false, "asterisk": false, "pattern": "[^\\/]+?" } ] }, "components": {}, "instances": {}, "meta": {}, "props": {} } ]}
点击:‘params-regex/333’{ "meta": {}, "path": "/params-regex/333", "hash": "", "query": {}, "params": { "id": "333" }, "fullPath": "/params-regex/333", "matched": [ { "path": "/params-regex/:id(\\d+)", "regex": { "keys": [ { "name": "id", "prefix": "/", "delimiter": "/", "optional": false, "repeat": false, "partial": false, "asterisk": false, "pattern": "\\d+" } ] }, "components": {}, "instances": {}, "meta": {}, "props": {} } ]}
阅读全文
1 0
- 路由url传值
- URL路由
- ThinkPHP的URL路由
- rails的URL路由
- rails URL路由
- Thinkphp url路由配置
- ThinkPHP URL路由解析
- thinkphp 配置URL路由
- 【Yii】url路由
- 配置URL路由
- ThinkPHP URL 路由功能
- js URL 地址路由
- ThinkPHP URL路由解析
- discuz URL 路由解析
- URL路由配置
- phpcms URL路由原理
- url和路由
- Werkzeug 之URL 路由
- latex 集合相关符号:实数集,整数集,并,包含
- 概率神经网络(PNN)
- 自制图片预加载jq插件
- acm Trailing Zeroes (III)
- linux学习总结 unit10打包与压缩
- 路由url传值
- 2017 杭电多校联赛第二场 1003 Maximum Sequence(单调队列)HDU 6047
- 源码修改之判断SVProgressHud是否仍显示在界面上
- iOS 语音识别
- 使用objdump grub中的命令
- Window API读取串口
- LeetCode 55 Jump Game(Python 实现及详解)
- C语言32个关键字_复杂数据类型
- centos搭建git服务器,并同步线上项目