vueRouter的实现原理和vueRouter的基本使用

vueRouter的实现原理

vue路由模式⼀共有两种,分别是**hash**和**history.**
他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯有#,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.
history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的

vueRouter的基本使用

1，安装插件

yarn add vue-router@跟版本号

2.在router文件夹下的index.js文件里

import Vue from 'vue'//引入vue实例
import VueRouter from 'vue-router'//引入下载好的vue-router

Vue.use(VueRouter)//使用
//创建路由映射表
const routes = [
   {
     path: '/',
     name: 'Home',
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')//此处是懒加载
   }
  ]

//实例化VueRouter
const router = new VueRouter({
  routes
})
//导出
export default router

3.在main.js中引入并挂在

import router from './router'


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