路由url传值

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