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