Vue.js 在路由规则中定义参数和传参方式

Love The Way You Lie 2022-03-17 14:22 77阅读 0赞

## 在路由规则中定义参数 ##

1.  在规则中定义参数：

{ path: '/register/:id', component: register }

1.  通过 `this.$route.params`来获取路由中的参数：

var register = Vue.extend({
          template: '<h1>注册组件 --- {
       {this.$route.params.id}}</h1>'
        });

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
    
      </div>
    
      <script>
    
        var login = {
          template: '<h1>登录 --- {
       { $route.query.id }} --- {
       { $route.query.name }}</h1>',
          data(){
            return {
              msg: '123'
            }
          },
          created(){ // 组件的生命周期钩子函数
            // console.log(this.$route)
            // console.log(this.$route.query.id)
          }
        }
    
        var register = {
          template: '<h1>注册</h1>'
        }
    
        var router = new VueRouter({
          routes: [
            { path: '/login', component: login },
            { path: '/register', component: register }
          ]
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          // router: router
          router
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

## 路由规则传参方式 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        
        <router-link to="/login/12/ls">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
    
      </div>
    
      <script>
    
        var login = {
          template: '<h1>登录 --- {
       { $route.params.id }} --- {
       { $route.params.name }}</h1>',
          data(){
            return {
              msg: '123'
            }
          },
          created(){ // 组件的生命周期钩子函数
            console.log(this.$route.params.id)
          }
        }
    
        var register = {
          template: '<h1>注册</h1>'
        }
    
        var router = new VueRouter({
          routes: [
            { path: '/login/:id/:name', component: login },
            { path: '/register', component: register }
          ]
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          // router: router
          router
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220317/bb32b9f8b7f44f48a09c8184585d96fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220317/6861ae60e0b749b1ab89743dc1777dd1.png