Vue之Router路由传参之一query（043）

Vue之Router路由传参之一query

一、目录结构

注：pages文件夹里为路由组件，route文件夹里为路由配置
二、main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false

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

三、index.js

import VueRourter from 'vue-router'
import news from '../pages/news.vue'

export default new VueRourter({
    routes:[{
             path:'/news',
             component:news
    }]
})

四、Ａpp.vue

五、news.vue

六、总结
在中 :to绑定quuery项。然后在路由组件里用$route.query.属性接收。

七、效果