Vue-router简单实现

vue-router是一个插件，使用要先安装  npm i vue-router

使用步骤：

// 配置js文件

import Vue from "vue"

import VueRouter from "vue-router"

Vue.use(Vuerouter) //1、注册插件,如果参数是函数就执行函数，如果是对象则调用install静态方法



const router = new VueRouter({ // 2、构造 参数是对象选项routers 地址是component 响应式

    mode:'hash/history'

    // 路由规则

    {path:'/goods/:id', props:true, component:()=>import('../views/Goods.vue')}     // 在goods组件内可以通过prop['id']接受id     component懒加载

})

export default router



// 3、再把router挂在到vue实例里面

new Vue({

router,

render: (h) => h(Main)

}).$mount('#app')

路由传值：

1、props

2、hash url上 ？id=12     => query

     history url上 /id=12     =>paras

hash和history

hash基于锚点，监听onhashchange事件。 hsitory h5新出的history库 刷新就请求接口，脚手架解决了刷新接口失败的问题