vue路由params和query传参区别-蒲公英云

vue路由params和query传参区别

野性酷女 2023-07-10 14:11 86阅读 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>
      <!-- params传参有两种,一种是声明式传参,另外一种是下文的编程式传参,都是以命名路由的方式实现 -->
      <!-- 1.params声明式传参 -->
      <!-- <router-link :to="{name:'about',params:{name:'cxc}}">关于</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>