<!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>08.路由规则中定义参数</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">登录</router-link>
        <router-link to="/register">注册</router-link>
 
        <router-view></router-view>
    </div>
 
    <script>
 
        var login = {
            template: '<h1>登录组件</h1>'
        }
        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>

2、使用params方式传递路由参数

步骤1：修改路由匹配规则 routes 里面的 path属性值

如下图：加了一个 :id

步骤2：在连接跳转处，修改 router-link的 to属性值

如下图：加了一个 /12

我们运行程序，点击登录进行切换，发现浏览器url地址多了一个 /12

说明修改以后：router-link的 to属性值能和 routes 里面的 path属性值能匹配上

那么怎么在组件内部拿到这个参数id呢？

步骤3：组件内部拿到这个参数id

组件有它的生命周期，我们在登录组件里面，写一个它的生命周期方法 created，并输出相关对象：

        var login = {
            template: '<h1>登录组件</h1>',

            created() { // 组件的生命周期钩子函数
                // this代表当前组件，$route 表示当前路由信息对象
                console.log(this.$route)
            }
        }

运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：

这个时候 query对象里面没有值，因为我们没有用到上篇博文提到的方式，如下：

<router-link to="/login?id=10&name=zs">登录</router-link>

这时候的 id值在 params里面。

然后我们可以这样来获取 id 的值：this.$route.params.id

    var login = {
      template: '<h1>登录组件</h1>',

      created(){ // 组件的生命周期钩子函数
        console.log(this.$route)
        console.log(this.$route.params.id)
      }
    }

那么怎么把 id的值放到 h1标签里面

步骤4：把 id的值放到 h1标签里面

这个就不多说了，与query方式传递路由类似，只是把关键字更换为 params

运行程序，点击登录进行切换，我们来看一下效果

3、使用 params方式传递多个参数

步骤1：修改 routes路由匹配规则里面的 path属性值

步骤2：修改 router-link的 to属性值

运行程序，点击登录进行切换，我们来看一下效果

注意：如果你只写一个参数，如下：

<router-link to="/login/12">登录</router-link>

这样运行程序，是匹配不上 routes路由匹配规则的。

4、修改后的最终代码

<!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>09.路由规则传参方式2_params</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>',

      created(){ // 组件的生命周期钩子函数
        console.log(this.$route)
        console.log(this.$route.params.id)
      }
    }

    var register = {
      template: '<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes: [
        //:id 这个冒号是占位符。整个的意思是，将来这个位置要传入一个 id进来
        //具体这个 id怎么来，需要具体地址 url进行解析得到
        { 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>

三、其他

1、有关 query和 params方式传递路由参数，这两种方式，使用哪种看个人使用习惯

2、运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：

这个 params对象里面的值，是怎么来的？

在 matched 匹配对象里面，path是我们手动写的格式，在内部它会通过预解析成一个 regex形式的正则表达式，

然后用这个正则表达式去解析 fullPath对象，解析出来的结果就是我们的 params对象。

Vue知识整理，专题之路由：6、路由传参-使用params方式传递路由参数

一、前言

二、使用params方式传递路由参数

1、路由实例简约版