Vue框架（八）

最新推荐文章于 2023-07-21 09:42:42 发布
最新推荐文章于 2023-07-21 09:42:42 发布
阅读量1.9k 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li5306/article/details/119804409
版权

一、路由组件通信

1.0 

<body>
    <div id='app'>
    </div>
</body>

路由组件间通信,用bus通信会变得和麻烦
因我目标路由组件默认情况下没有创建 

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const bus = new Vue();

    const Home = {
        template: `
            <div>
                <h3>首页--{{msg}}</h3>
                <input type='text' v-model='msg' />
                <button @click='toNews'>到新闻页</button>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
        methods: {
          toNews() {
            this.$router.push('/news');
            bus.$emit('getmsg', this.msg);
            console.log('$emit');
          }
        }
    }

    const News = {
        template: `
            <div>
                <h3>新闻---{{msg}}</h3>
                <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
        created() {
          console.log('$on');
          bus.$on('getmsg', (msg) => {
            this.msg = msg
          })
        }
    }

    const Guide = {
        template: `
            <div>
                <h3>攻略</h3>
                <p>攻略的内容..<span>2018-07-24</span></p>
            </div>
        `
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home
            }, {
                path: '/news',
                component: News
            }, {
                path: '/guide',
                component: Guide
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
            <div>
                <keep-alive>
                  <router-view />
                </keep-alive>
            </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

1.1

 路由组件通信 => 路由参数.
     1:通过params传参.只能通过name跳转. 获取参数: $route.params.参数名
     2:通过query传参.可以是name或者path跳转. 获取参数: $route.query.参数名

     params传参和query传参
     1:query传参通过url传递,params不是.
     2:query只应该传递字符串和数字的参数,params可以传递任何类型的参数.
     3:query的参数长度不能超过2000字符.(受url长度限制).params没有长度限制.
     4:query传递的参数刷新后还存在.params的参数刷新后丢失.

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
            <div>
                <h3>首页--{{msg}}</h3>
                <input type='text' v-model='msg' />
                <button @click='toNews'>到新闻页</button>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
        methods: {
          toNews() {

            this.$router.push({ 
              name: 'news',
              // params书写需要通信的数据
              params: {
                msg: this.msg
              }
            });

            // this.$router.push({ 
            //   name: 'news',
            //   // params书写需要通信的数据
            //   query: {
            //     msg: this.msg
            //   }
            // });

            // this.$router.push({ 
            //   path: '/news',
            //   // params书写需要通信的数据
            //   query: {
            //     msg: this.msg,
            //     abc: 'wwwww'
            //   }
            // });
          }
        }
    }

    const News = {
        template: `
            <div>
                <!--<h3>新闻---{{ $route.params.msg }}</h3>-->
                <h3>新闻---{{ $route.params.msg }}</h3>
                <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
    }

    const Guide = {
        template: `
            <div>
                <h3>攻略</h3>
                <p>攻略的内容..<span>2018-07-24</span></p>
            </div>
        `
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: News,
                name: 'news'
            }, {
                path: '/guide',
                component: Guide,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
            <div>
                <keep-alive>
                  <router-view />
                </keep-alive>
            </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

二、$route对象

<body>
    <div id='app'>
    </div>
</body>

 $router => 路由实例.(跳转路由时用这个对象)
     $route => 路由选项对象.(每次路由切换时,它内部的属性都会改变)
     routes => 路由配置表 (实例化路由时写的)

     this.$route => 任何组件都可以访问.可以获取路由路径,路由参数等数据 

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
          <div>
            <h3>首页</h3>
            <input type='text' />
            <button @click='toNews'>到新闻页</button>
            <p>首页的内容..<span>2018-07-22</span></p>
          </div>
        `,
        created() {
          // console.log(this.$route);
        },
        methods: {
          toNews() {
            this.$router.push({
              name: 'news',
              query: {
                msg: '你好'
              }
            })
            console.log('跳转后',this.$route);
          }
        }
    }

    const News = {
        template: `
          <div>
            <h3>新闻</h3>
            <p>新闻的内容..<span>2018-07-23</span></p>
          </div>
        `,
        data() {
          return { msg: '' }
        },
        created() {
          console.log('news',this.$route);
        }
    }

    const Guide = {
        template: `
          <div>
            <h3>攻略</h3>
            <p>攻略的内容..<span>2018-07-24</span></p>
          </div>
        `
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: News,
                name: 'news'
            }, {
                path: '/guide',
                component: Guide,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
            <div>
                <keep-alive>
                  <router-view />
                </keep-alive>
            </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

三、 params刷新丢失

<body>
    <div id='app'>
    </div>
</body>

$route.params.msg => 刷新后变成undefined

  •      只有在Home跳到News时.$route.params.msg才是我们希望传递的参数.
  •      只要不是Home到News的路由跳转，都无法获取这个msg数据
  •      刷新相对于是从News到News.因此无法获取msg.
  •      缓存组件时,刷新网页,也会导致组件重新创建的.
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
  
    const Home = {
        template: `
          <div>
            <h3>首页</h3>
            <input type='text' />
            <button @click='toNews'>到新闻页</button>
            <p>首页的内容..<span>2018-07-22</span></p>
          </div>
        `,
        methods: {
          toNews() {
            this.$router.push({
              name: 'news',
              params: {
                msg: '你好'
              }
            })
          }
        }
    }

    const News = {
        template: `
          <div>
            <h3>新闻---{{$route.params.msg}}</h3>
            <p>新闻的内容..<span>2018-07-23</span></p>
          </div>
        `,
        data() {
          return { msg: '' }
        }
    }

    const Guide = {
        template: `
          <div>
            <h3>攻略</h3>
            <p>攻略的内容..<span>2018-07-24</span></p>
          </div>
        `,
        created() {
          console.log(this.$route);
        }
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: News,
                name: 'news'
            }, {
                path: '/guide',
                component: Guide,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <keep-alive>
              <router-view />
            </keep-alive>
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

四、 动态路由 

4.0 

<body>
    <div id='app'>
    </div>
</body>

基本路由 => 一个路径对应一个组件(页面有限).

  •      动态路由 => 多个路径对应一个组件(重复页面)(组件根据不同的路径显示不同的内容).
  •      动态路由 => 切换视图时,组件的updated触发,created不触发.
  •      动态路由 => 切换视图时,created不会重复触发.就算缓存后,activated也不会重复触发.
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
   
    const Home = {
        template: `
          <div>
            <h3>首页--{{$route.path}}</h3>
            <p>首页的内容..<span>2018-07-22</span></p>
          </div>
        `,
        updated() {
          console.log('Home组件刷新')
        },
        created() {
          console.log('Home组件创建')
        }
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: Home,
                name: 'news'
            }, {
                path: '/guide',
                component: Home,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/guide'>攻略</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

4.1

 如何实现组件根据不同的路径显示不同的内容?

  •      工作中是通过不同的接口来完成的.例如根据不同的路径请求不同接口,请求到数据后渲染即可. 
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
  
    const Home = {
        template: `
          <div>
            <h3>{{data[$route.path]}}--{{$route.path}}</h3>
            <p>{{data[$route.path]}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        data() {
          return {
            data: {
              '/home': '首页',
              '/news': '新闻',
              '/sport': '体育'
            }
          }
        }
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: Home,
                name: 'news'
            }, {
                path: '/sport',
                component: Home,
                name: 'sport'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

 4.2

 path: '/:path' => path => 是一个变量,是一个动态的路径.
     path的值如何确定? => 当前的路径是什么,它就会自动变成什么.
    
     如何获取这个参数?
     $route.params.动态路径名获取.(不带/) 

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
          <div>
            <h3>{{data[$route.params.path]}}--{{$route.params.path}}</h3>
            <p>{{data[$route.params.path]}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        data() {
          return {
            data: {
              'home': '首页',
              'news': '新闻',
              'sport': '体育'
            }
          }
        },
        updated() {
          console.log(this.$route)
        }
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/:path',
              component: Home,
              name: 'home'
            }, {
              path: '/',
              redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

 

五、动态路由选项

<body>
    <div id='app'>
    </div>
</body>

如果用了动态路径,一定需要注意路由选项的顺序问题.

     每次路径变化,都会遍历routes数组，看当前的路径和routes内的那个路径一致，
     如果有匹配的路径,就显示对应的组件.
     从上往下匹配,如果前面的path匹配了,后面的path就不检查了.

     动态路径 => 意味着所有的路径都匹配.

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    const Login = {
      template: `
        <div>
          <input type='text' />
          <input type='password' />
          <button @click='$router.push("/home")'>登录</button>
        </div>
      `
    }

    const Home = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <h3>{{data[$route.params.path]}}--{{$route.params.path}}</h3>
            <p>{{data[$route.params.path]}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        data() {
          return {
            data: {
              'home': '首页',
              'news': '新闻',
              'sport': '体育'
            }
          }
        },
        updated() {
          console.log(this.$route)
        }
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/login',
              component: Login,
            }, {
              path: '/:path',
              component: Home,
              name: 'home'
            }, {
              path: '/',
              redirect: '/login'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

六、动态路径 

<body>
    <div id='app'>
    </div>
</body>

/:abc/:path => 路径必须有两个/
     这两个/后面的内容任意.

     /:abc/home/:path => 路径必须有3个/ 中间的路径必须是home

     多个动态的路径字段,都可以通过params来获取.
     $route.params.abc.
     $route.params.path.

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>   
    const Home = {
        template: `
          <div>
            <h3>{{data[$route.params.path]}}--{{$route.params.path}}</h3>
            <p>{{data[$route.params.path]}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        data() {
          return {
            data: {
              'home': '首页',
              'news': '新闻',
              'sport': '体育'
            }
          }
        },
        updated() {
          console.log(this.$route)
        }
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/:abc/home/:path',
              component: Home,
              name: 'home'
            }, {
              path: '/',
              redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

七、props属性的布尔模式 

<body>
    <div id='app'>
    </div>
</body>

路由选项的props => 用于进行组件和路由的解耦

     props 的作用 => $route.params.abc 映射成组件的 props数据abc

     props的三种模式
     1:布尔模式 (值是布尔值)
     2:对象模式 (值是纯对象)
     3:函数模式 (值是函数)

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
            <div>
                <h3>首页--{{msg}}</h3>
                <input type='text' v-model='msg' />
                <button @click='toNews'>到新闻页</button>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
        methods: {
          toNews() {
            this.$router.push({ 
              name: 'news',
              // params书写需要通信的数据
              params: {
                msg: this.msg
              }
            });
          }
        }
    }

    const News = {
        template: `
            <div>
                <h3>新闻---{{ msg }}</h3>
                <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        props: ['msg']
    }

    const Guide = {
        template: `
            <div>
                <h3>攻略</h3>
                <p>攻略的内容..<span>2018-07-24</span></p>
            </div>
        `
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: News,
                name: 'news',
                // 布尔模式
                props: true
            }, {
                path: '/guide',
                component: Guide,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
            <div>
                <keep-alive>
                  <router-view />
                </keep-alive>
            </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

八、对象模式 

<body>
    <div id='app'>
    </div>
</body>

 如果props是一个对象,
     则可以把对象内的属性,映射成组件的props数据

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
          <div>
            <h3>{{data}}</h3>
            <p>{{data}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        props: ['data']
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/:path',
              component: Home,
              name: 'home',
              props: {
                data: {
                  home: '首页',
                  news: '新闻',
                  sport: '体育'
                }
              }
            }, {
              path: '/',
              redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

九、函数模式 

<body>
    <div id='app'>
    </div>
</body>

布尔模式 => 把$route.params.msg 映射成 组件的props

  •      对象模式 => 把对象是属性映射成组件的props.
  •      函数模式 => 万能模式.可以映射任何的数据.
  •      函数模式 => 函数需要return一个对象.这个对象的属性就是组件props的数据
  •      函数的参数就是当前路由选项的$route对象.
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>   
  
    const Home = {
        template: `
          <div>
            <h3>{{data[path]}}</h3>
            <p>{{data[path]}}的内容..<span>2018-07-22</span></p>
          </div>
        `,
        props: ['data', 'path']
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/:path',
              component: Home,
              name: 'home',
              props: (route) => {
                return {
                  path: route.params.path,
                  data: {
                    home: '首页',
                    news: '新闻',
                    sport: '体育'
                  }
                }
              }
            }, {
              path: '/',
              redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
          <div>
            <router-link to='/home'>首页</router-link>
            <router-link to='/news'>新闻</router-link>
            <router-link to='/sport'>体育</router-link>
            <router-view />
          </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

十、函数模式映射query 

<body>
    <div id='app'>
    </div>
</body>

路由选项的props => 用于进行组件和路由的解耦

     props 的作用 => $route.params.abc 映射成组件的 props数据abc

     props的三种模式
     1:布尔模式 (值是布尔值)
     2:对象模式 (值是纯对象)
     3:函数模式 (值是函数)

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
            <div>
                <h3>首页--{{msg}}</h3>
                <input type='text' v-model='msg' />
                <button @click='toNews'>到新闻页</button>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        data() {
          return { msg: '' }
        },
        methods: {
          toNews() {
            this.$router.push({ 
              name: 'news',
              query: {
                msg: this.msg
              }
            });
          }
        }
    }

    const News = {
        template: `
            <div>
              <h3>新闻---{{ msg }}</h3>
              <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        props: ['msg']
    }

    const Guide = {
        template: `
            <div>
                <h3>攻略</h3>
                <p>攻略的内容..<span>2018-07-24</span></p>
            </div>
        `
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                name: 'home'
            }, {
                path: '/news',
                component: News,
                name: 'news',
                // 函数模式,手动让msg等于route.query.msg
                props: (route) => ({ msg: route.query.msg })
            }, {
                path: '/guide',
                component: Guide,
                name: 'guide'
            }, {
                path: '/',
                redirect: '/home'
            }
        ]
    });

    const App = {
        template: `
            <div>
                <keep-alive>
                  <router-view />
                </keep-alive>
            </div>
        `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

十一、meta选项 

11.0

<body>
    <div id='app'>
    </div>
</body>

 meta => 可以用于定义一些路由组件的视图表现字段.(自定义字段) 

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    const Home = {
        template: `
            <div>
                <h3>首页</h3>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        created() {
          // console.log(this.$route)
          document.title = this.$route.meta;
        }
    }

    const News = {
        template: `
            <div>
                <h3>新闻</h3>
                <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        created() {
          // console.log(this.$route)
          document.title = this.$route.meta;
        }
    }

    const Guide = {
        template: `
          <div>
            <h3>攻略</h3>
            <p>攻略的内容..<span>2018-07-24</span></p>
          </div>
        `,
        created() {
          // console.log(this.$route)
          document.title = this.$route.meta;
        }
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/news',
              component: News,
              meta: '新闻'
            }, {
              path: '/home',
              component: Home,
              meta: '首页'
            }, {
              path: '/guide',
              component: Guide,
              meta: '攻略'
            }, {
              path: '/',
              redirect: '/home',
            }
        ]
    });

    const App = {
      template: `
        <div>
          <router-link to='/home'>首页</router-link>
          <router-link to='/news'>新闻</router-link>
          <router-link to='/guide'>攻略</router-link>
          <router-view />
        </div>
      `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

 11.1

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const Home = {
        template: `
            <div>
                <h3>首页</h3>
                <p>首页的内容..<span>2018-07-22</span></p>
            </div>
        `,
        created() {
          // 设置网页标题
          document.title = this.$route.meta.title;
        }
    }

    const News = {
        template: `
            <div>
                <h3>新闻</h3>
                <p>新闻的内容..<span>2018-07-23</span></p>
            </div>
        `,
        created() {
          // 设置网页的标题。
          document.title =this.$route.meta.title;
          // 获取link标签设置图片。
          const [oLink] = document.querySelectorAll('link');
          oLink.href = this.$route.meta.icon;
        }
    }

    const Guide = {
        template: `
          <div>
            <h3>攻略</h3>
            <p>攻略的内容..<span>2018-07-24</span></p>
          </div>
        `,
        created() {
          document.title = this.$route.meta.title;
        }
    }

    const router = new VueRouter({
        routes: [
            {
              path: '/news',
              component: News,
              meta: {
                title: '新闻',
                icon: '222.jpg',
              }
            }, {
              path: '/home',
              component: Home,
              meta: {
                title: '首页'
              }
            }, {
              path: '/guide',
              component: Guide,
              meta: {
                title: '攻略'
              }
            }, {
              path: '/',
              redirect: '/home',
            }
        ]
    });

    const App = {
      template: `
        <div>
          <router-link to='/home'>首页</router-link>
          <router-link to='/news'>新闻</router-link>
          <router-link to='/guide'>攻略</router-link>
          <router-view />
        </div>
      `
    }

    new Vue({
        render: h => h(App),
        router
    }).$mount('#app');
    
</script>

AVIC_501
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器URL传参最大长度问题
chunhuang7765的博客
07-24 2839
这几天为解决一个BUG头疼了一段时间，BUG现象如下： 一个选择人员的选择控件，当选择多个人时(50多个的时候)，返回没有错误现象，而再一次打开的时候就报404错误。 看到这个错误非常纳闷，无法下手，只能再一次看控件的代码，在详细看代码时，发现所有的参数都是经过URL传参的，赶紧百度一下UR...
vue框架
热门推荐
A20201130的博客
05-09 9万+
一、vue是什么 官方解释：vue是一套用于构建用户界面的渐进式框架。 vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。 补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增强其能力。 vue-router vuex axios nuxt 二、vue的核心 ①数据驱动视图（页面） 修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。 ②MVVM模式 M 数据模型 model V 视图..
Vue学习：路由的query参数
weixin_47295886的博客
03-09 137
点击跳转的组件，展示的是一个组件，但是传递的数据不同--传递的是路由组件。组件相关的路由信息，处理query中的 参数detail组件中。路由接收的参数有两种：query？需要路径可变 {m.id}是变量 模板字符串。使用规则 跳转传递参数。
vue 在IE浏览器路由携带参数超过限制长度怎么解决
weixin_39818813的博客
10-18 6396
最近在做IE浏览器兼容的时候，发现从前一个页面带的参数过多的话，在IE浏览器里面，是不能正常跳转到下一个页面的。 原因是IE浏览器对路由的限制长度为2kb。 解决： 路由传参时放弃get方式，采用post传参的方式。 post方式 页面跳转 //由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则par...
vue使用路由跳转页面时携带过多参数，页面刷新后无法再次解析
zyk1036的博客
07-21 510
将参数进行序列化。
Vue知识点整理（六）- vue-router（2）- query参数、命名路由、params参数、replace属性
JHY97的博客
04-26 1796
一、路由的query参数 1.传递参数，例如： <!-- 跳转并携带query参数，to的字符串写法 --> <!-- <router-link :to="`/一级路径/二级路径/三级路径?参数1=${...}&参数2=${...}`">跳转</router-link> --> <!-- 跳转并携带query参数，to的对象写法 --> <router-link :to="{
【Vue】路由的跳转、传参问题
weixin_43790653的博客
06-27 3315
【Vue】路由的跳转、传参问题
小程序传参总结
2303_76218115的博客
04-03 3714
在小程序开发中，页面跳转和数据传递是非常常见的需求。本文将介绍小程序中常用的传参方法，包括Query参数传递、全局变量传递和Storage传递，并对它们的使用场景和注意事项进行分析和总结。本文介绍了小程序中常用的传参方法，包括Query参数传递、全局变量传递和Storage传递等并对它们的使用场景和注意事项进行了分析和总结。在实际开发中，我们需要根据具体的需求和情况，不同的方式适用于不同的场景，灵活地选择传参方式，并结合一些优秀的状态管理工具，提高开发效率和用户体验，以上便是全部内容希望对各位同学有所帮助。
Vue框架总结.pdf
04-03
Vue实例是Vue框架的核心，它是一个包含了Vue配置的对象，如数据、方法、生命周期钩子等。Vue实例创建后，可以通过`data`属性声明响应式数据，`methods`属性定义组件的方法，`mounted`等生命周期钩子可以在特定时刻...
基于vue框架的咖啡线上点餐app
05-31
在构建“基于vue框架的咖啡线上点餐app”项目中，Vue.js 的核心概念和技术是至关重要的。 首先，Vue.js 提供了声明式的数据绑定，使得开发者可以轻松地将组件的视图与数据模型关联起来。在点餐app中，当用户选择...
【基于C#+vue项目源码】快速开发框架Vue.NetCore
08-02
Vue + C#.NetCore前后端分离，不一样的快速开发框架(提供Vue2/Vue3版本) 框架核心 快速开发(基础功能全部由代码生成器生成) 支持前端、后台自定义业务代码扩展,后台提供了大量常用扩展与通用类 前端、后台提供了近...
vue框架介绍简介vue框架介绍简介内容概况
04-04
vue框架介绍简介内容概况： 本文将介绍一款名为Vue.js的前端框架。Vue.js是一个轻量级的前端框架，用于构建用户界面和单页面应用程序。它由尤雨溪（Evan You）于2014年创建，并迅速成为全球最受欢迎的JavaScript框架...
Vue路由传参 (params query )
lwg112233的博客
09-02 1213
1.1. vue路由传参有3方法实现中： 1.编程式导航 ，2.声明式导航, 3.字符串拼接 一.编程式导航 : 1.在router-link标签中的to属性中定义要去的页面 <!-- router-link --> <router-link :to="{path:'/detail',query:{_id:item.id}}"> <van-card v-fo...
Vue路由传参(query)
weixin_45830334的博客
03-30 1万+
从遍历出的列表里跳转对应的详情 template中 <div v-for="(item,index) in list" :key="index"> <p>{{ item.pigId }}</p> <p>{{ item.pigName }}</p> </div> script中 data() { return { list: [] } }, 通过接口获取列表先: //
vue路由传参中的params和query不要随意乱用
denglouhen的博客
06-12 3499
vue中的路由传参主要是分为两种方式：params和query。 主要用法就是写在push函数的参数对象中：this.$route.push({}); params的写法： this.$router.push({name: 'myPathName', params: {id: '1234'}}); 在目标页面获取id let id = this.$route.params.id; ...
vue 中的动态传参和query传参
hsany330的专栏
09-27 447
Vue router 如何传参 params、query 是什么？ params：/router1/:id，这里的 id 叫做 params。例如/router1/123, /router1/789 query：/router1?id=123，这里的 id 叫做 query。例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时, 并不
vue路由传值
weixin_44145962的博客
11-18 614
基本路由传参 传递参数： 方式一： this.$router.push('/path地址?参数一=参数值1&参数二=参数值2') 方式二： this.$router.push({path:'',query:{参数一:参数值1,参数二:参数值2}}) 接收参数： this.$route.query.参数名 示例： 在做token失效退出的axios配置中， axios.interceptor.response.use((res)=>{ return res }, (error)=>{
监理内业资料和表格使用（83页）.doc
最新发布
08-31
监理内业资料和表格使用（83页）.doc
java vue框架
09-05
Java Vue框架是指使用Java语言和Vue.js框架来开发Web应用程序的一种技术架构。Java是一种跨平台的编程语言，具有强大的面向对象特性和丰富的生态系统，被广泛应用于企业级应用程序开发。而Vue.js是一种轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值