zoukankan      html  css  js  c++  java
  • vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import App from './App'
    Vue.use(VueRouter)
    const router = new VueRouter({
    routes:[
    { path: '/', redirect: '/index' }, //重定向
    { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
    children:[
    { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }   //嵌套路由
    ]
    },
    { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },//require这种就是按需加载(懒加载)
    ]
    })
    const app = new Vue({
    router,
    render: h => h(App)

    **************************************************************************************路由跳转传参的query和params的不同********************************************************************************

    1.Params

    由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问

    通过name获取页面,传递params:在目标页面通过this.$route.params获取参数:

     2.Query

     页面通过path和query传递参数,this.$route.query获取

    query传递的参数url看得到,params则url看不到参数

    path--对应query   name--对应params

    **************************************************************************************c*********************************************************************************************************************

  • 相关阅读:
    nyoj_518_取球游戏_201404161738
    nyoj_528_找球号(三)_201404152050
    nyoj_68_三点顺序_201404152013
    nyoj_123_士兵杀敌(四)_201404131143
    树状数组
    nyoj_116_士兵杀敌(二)_201404131107
    hdu_1024_糖果大战_201404021640
    hdu_1205_吃糖果_201404021440
    nyoj_278_排队_201403282135
    nyoj_127_星际之门(一)_201403282033
  • 原文地址:https://www.cnblogs.com/myfirstboke/p/7940382.html
Copyright © 2011-2022 走看看