zoukankan      html  css  js  c++  java
  • vue中路由参数

    路由参数的说明

      <div id="app">
        <ul>
          <li>
            <router-link to="/home">首页</router-link>
          </li>
          <li>
            <router-link to="/stu/1001">学生 1</router-link>
          </li>
          <li>
            <router-link to="/stu/1002">学生 2</router-link>
          </li>
        </ul>
    
        <router-view></router-view>
      </div>
      <script src="./vue.js"></script>
      <script src="./vue-router.js"></script>
      <script>
        // 路由参数:
    
        const Home = {
          template: `
            <h1>这是 Home 组件</h1>
          `
        }
    
        const Stu = {
          template: `
            <div>
              <p>这是第一个学生 {{ $route.params.id }} -- {{ name }}</p>
            </div>
          `,
    
          data() {
            return {
              stuList: {
                '1001': '小明',
                '1002': '小红'
              },
    
              name: ''
            }
          },
    
          // vue为了高效的渲染组件,如果从 /stu/1001 直接跳转到 /stu/1002 的时候,会复用这个组件
          // 这就导致了组件的 created 钩子函数不会再次执行
          // 如何解决???通过监听 $route 的变化,来解决
          created() {
            // console.log('获取到路由参数:', this.$route.params.id)
    
            const id = this.$route.params.id
            this.name = this.stuList[id]
          },
    
          watch: {
            // 监视路由的改变
            $route(to, from) {
              // from 从哪来,也就是:从哪个路由跳转过来的
              // to   到哪去,也就是:也就是要跳转到的路由(也就是当前路由)
              // console.log(to)
              // console.log('路由参数为:', to.params.id)
    
              const id = to.params.id
              this.name = this.stuList[id]
            }
          }
        }
    
        const router = new VueRouter({
          routes: [
            { path: '/', redirect: '/home' },
            { path: '/home', component: Home },
    
            // :id 就是路由参数
            // 匹配的哈希值为: /stu/1001 或 /stu/1002 或 /stu/abc
            // 无法匹配的哈希值为: /stu 或 /stu/ 或 /stu/1001/ab
            { path: '/stu/:id', component: Stu },
            // { path: '/stu/1001', component: Stu1 },
            // { path: '/stu/1002', component: Stu2 },
          ]
        })
    
        const vm = new Vue({
          el: '#app',
          data: {
    
          },
          router
        })
      </script>
    

    路由参数基本的使用

      <div id="app">
        <ul>
          <li>
            <router-link to="/home">首页</router-link>
          </li>
          <li>
            <router-link to="/stu/1001">学生 1</router-link>
          </li>
          <li>
            <router-link to="/stu/1002">学生 2</router-link>
          </li>
        </ul>
    
        <router-view></router-view>
      </div>
      <script src="./vue.js"></script>
      <script src="./vue-router.js"></script>
      <script>
        // 路由参数:
    
        const Home = {
          template: `
            <h1>这是 Home 组件</h1>
          `
        }
    
        const Stu = {
          template: `
            <div>
              <p>这是第一个学生 {{ $route.params.id }}</p>
            </div>
          `
        }
    
        const router = new VueRouter({
          routes: [
            { path: '/', redirect: '/home' },
            { path: '/home', component: Home },
    
            // :id 就是路由参数
            // 匹配的哈希值为: /stu/1001 或 /stu/1002 或 /stu/abc
            // 无法匹配的哈希值为: /stu 或 /stu/ 或 /stu/1001/ab
            { path: '/stu/:id', component: Stu },
            // { path: '/stu/1001', component: Stu1 },
            // { path: '/stu/1002', component: Stu2 },
          ]
        })
    
        const vm = new Vue({
          el: '#app',
          data: {
    
          },
          router
        })
      </script>
    
  • 相关阅读:
    java集合之HashMap源码解析
    springboot下多线程开发注意事项
    java集合之List源码解析
    关于Layer web弹层组件的加载(loading)层位置居中问题
    微信公众号支付提示mch_id参数格式错误
    ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
    C#常见金额优选类型及其三种常用的取整方式
    Mui Webview下来刷新上拉加载实现
    Select下拉框使用ajax异步绑定数据
    .NET、C#基础知识
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10531247.html
Copyright © 2011-2022 走看看