vue路由params和query传参区别

野性酷女 2023-07-10 14:11 1阅读 0赞

params和query传参方式

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <router-link to="/home">首页</router-link>
          <router-link to="/nav">导航</router-link>
          <router-link to="/about">关于</router-link>
          
          
          
          <router-view></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script>
          let Home = { 
            template: `<div> 我是首页 </div>`
          }
          let Nav = { 
            template: `<div> 我是导航 <button @click="handle()">点击去往About页面</button> </div>`,
            methods: { 
              handle() { 
                // 2.params编程式传参
                this.$router.push({  name: 'about', params: {  name: 'cxc' } })
                
                // query传参 url地址栏以?name=cxc键值对的方式显示
                this.$router.push({  path: '/about', query: {  name: 'cxc' } })
              }
            }
          }
          let About = { 
            template: `<div>我是关于</div>`
          }
          let router = new VueRouter({ 
            routes: [
              {  path: '/', redirect: '/home' },
              {  path: '/home', component: Home },
              {  path: '/nav', component: Nav },
              //动态绑定路由
              {  path: '/about/:name', component: About, name: 'about' }
            ]
          })
          let vm = new Vue({ 
            el: '#app',
            data: { },
            router,
            methods: { }
          })
        </script>
      </body>
    </html>

vue路由params和query传参区别

发表评论取消回复

还没有评论，来说两句吧...

相关阅读