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*********************************************************************************************************************

  • 相关阅读:
    LeetCode 485. Max Consecutive Ones
    LeetCode 367. Valid Perfect Square
    LeetCode 375. Guess Number Higher or Lower II
    LeetCode 374. Guess Number Higher or Lower
    LeetCode Word Pattern II
    LeetCode Arranging Coins
    LeetCode 422. Valid Word Square
    Session 共享
    java NIO
    非阻塞IO
  • 原文地址:https://www.cnblogs.com/myfirstboke/p/7940382.html
Copyright © 2011-2022 走看看