//引入路由
import { createRouter, createWebHashHistory } from "vue-router"
//引入在views里面创建的两个文件
import HomeView from "../views/HomeView"
import AboutView from "../views/AboutView"


//配置引入的两个文件
//先创建routes数组,数组里面负责承载两个页面的配置
const routes = [
    {
        //页面信息最少需要包含路径poth和组件component的信息
        path: "/", //../views/HomeView页面希望通过斜杠/来访问
        component:HomeView
    },
    {
        path: "/about", //../views/AboutView页面希望通过斜杠/about来访问
        component:AboutView
    }
]



//再把上面的routes配置放到下面的router对象里面


//通过createRouter({})创建路由
//还要在src文件夹里面创建一个views的文件夹，在views里面创建两个文件,比如创建HomeView.vue和AboutView.vue文件，这两个文件是跳转的两个页面
const router = createRouter({//要写两个参数，分别是访问方式history、路由配置routes。路由配置routes这个参数是上面自己写的，放进来就行

    //下面的createWebHashHistory在本文件末尾有补充
    history: createWebHashHistory(),//注意createWebHashHistory在本文件最上面那行的引入有，但是注意它在这一行是函数，要加个小括号

    //上面写好的routes配置
    routes

})


//路由创建好后，就导出，外部就能访问了
export default router;

//在main.js，即主入口文件里引入



/*补充:
createWebHashHistory: 默认后台会配置好
1、访问HomeView.vue页面时,网址是http://localhost:8080/
2、访问AboutView.vue页面时,网址是http://localhost:8080/about
原理:a标签的锚点链接

createWebHistory: 这种方式需要后台配合，做重定向，否则会出现404
1、访问HomeView.vue页面时,网址是http://localhost:8080/about#/
2、访问AboutView.vue页面时,网址是http://localhost:8080/about#/about
原理:H5的pushState(),是H5规定的管理页面的方式

*/