(四)vue Url传值

最新推荐文章于 2025-05-24 16:02:32 发布

原创最新推荐文章于 2025-05-24 16:02:32 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了在Vue.js应用程序中如何处理URL传递的参数，包括从路由中获取参数、在组件中使用这些参数以及如何在路由变化时监听参数的变化。通过实例展示了在index.html、main.js和Router.js中的关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-cli</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

main.js

import Vue from 'vue'
import Router from './Router'

Router.js

/**
 * Created by Amy on 2017/12/13.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode:'history',
  base:__dirname,
  routes:[
    {path:'/'},
    {path:'/params/:aaa/:bbb'},
    //正则写法
    {path:'/parame-regex/:id(\\d+)'} //只匹配数字
  ]
})

new Vue({
  router,
  template:`
      <div>
          <h1>Good morning</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='/parame-regex/555'>/parame-regex/555</router-link> </li>
              <li> <router-link to='/parame-regex/aaa'>/parame-regex/aaa</router-link> </li>
          </ul>
           <p>Show</p>
           <pre> <code>
            {{$route.fullPath}}
              {{ JSON.stringify($route,null,2) }}

           </code> </pre>
      </div>

  `
}).$mount('#app')