zoukankan      html  css  js  c++  java
  • Vue之路由规则中定义参数 传参方式2 params

    <!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="js/vue.js"></script>
      <script src="js/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>
      </div>
    
      <script>
        var login = {
          // this默认指当前组件实例,在插值表达式中this可以省略
          template: '<h1>登录 --- {{ $route.params.id}}  --- {{$route.params.name}}</h1>',
          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, //将路由规则挂载到vm实例中
          
        });
      </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    MySQL单实例、多实例服务脚本
    Shell之case结构条件句
    Shell之函数
    Shell之条件测试
    Shell脚本数字比较与四则运算
    Shell之分支结构
    Shell之变量的数值计算与输入
    Shell之变量子串与变量替换
    表单和框架
    HTML部分标签和代码
  • 原文地址:https://www.cnblogs.com/linm/p/12513471.html
Copyright © 2011-2022 走看看