路由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": {}    }  ]}

原创粉丝点击