npm i vue-router --save
//注意Vue2与Vue3的路由是互不兼容的，使用Vue3请使用Router4

//index.js文件
import {createRouter,createWebHistory } from 'vue-router'
 
const routes = [
    {
        path:'/',//这两个属性是必传的，这个是显示在路径中的内容
        component:() => import('../pages/login.vue')//这个是要通过路由跳转过去的组件位置(就是说我们要去的地方)
    }
]
 
const router = createRouter({
    history:createWebHistory(),
    routes  //路由信息
})
export default router//记得将路由暴露出去

//Vue2 mode history Vue3 createWebHistory(历史)，兼容性较差一点，但路径不显示#
//Vue2 mode hash Vue3 createHashHistory(哈希)
//Vue2 mode abstact Vue3 createMemoryHistory

window.addEventListener('hashchange',(e)=>{
    console.log(e)
})
//哈希原理：通过监听hashchange我们可以看到HashChangeEvent这个属性里面的
//newURL与oldURL，其实也就是新地址跟旧地址(此地址其实就是路由跳转的变化)

window.addEventListener('popstate',(e)=>{
    console.log(e)
})
//通过此属性得到的是PopStateEvent，在里面的state里面我们可以看到
//back(返回路径)current(当前页面)forward(上一个页面)
//监听跳转：通过history.pushState({存点东西},'第二个没啥用','第三个是跳转路径')，跳转后不会被浏览器监听到

<a href="/reg">rrr</a>

import {useRouter} from 'vue-router'

const router = useRouter()

//import { useRouter } from 'vue-router'
//const router = useRouter()
 //请注意，这个toPage是一个按钮，在页面中使用@click进行绑定
const toPage = () => {
  router.push('/reg')
}
//TS写法
const toPage = (url:string) => {
  router.push(url)//这种写法的话就需要自己在上面@click="toPage('这里传入路径')"，进行配置了
}

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({//对象形式的写法
    path: '/reg'//path是路径，这里一样是写死了，可以将参数传进来
  })
}

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({
    name: 'Reg'//这里需要注意，在前面设置的也需要进行修改，不能够再传入url了，因为我们这里是命名式写法，需要传入命名(此处是写死的做法，下面是传值式的写法)
  })
}
const toPage = (Name:string) => {//TS写法，不用TS写法的话写个Name就行了
  router.push({//一样是对象形式写法
    name: Name//传值式写法
  })
}

<router-link replace to="/">Login</router-link>
   <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

<button @click="toPage('/')">Login</button>
  <button @click="toPage('/reg')">Reg</button>
import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = (url: string) => {
  router.replace(url)//与router-link的区别就是，编程式导航的replace隐藏在js里面
}

<button @click="next">前进</button>
 <button @click="prev">后退</button>

const next = () => {
  //前进 数量不限于1
  router.go(1)//不知能前进，还可以后退，后退就是负数，数字的大小决定前进与后退几步
}
 
const prev = () => {
  //后退，这个就是纯后退了，按一下退一步
  router.back()
}

//子组件login.vue
const toDetail = (item:Item) =>{
    router.push({
        path:'/reg',
        query:item//item是一个对象
    })
}
//通过url路径，我们可以看到信息其实已经传过来了

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

params:item//虽然item本身也是对象，但是换成对象形式写会更好
//修改后
params:{
    id:item.id//这里取名定义的要跟下面 代码块1中的`动态路由参数`部分的 path对应上(取名是指id，而不是item.id)
}

import { useRoute } from 'vue-router';
import { data } from './list.json'
const route = useRoute()
//我们从data中获取值
data.find(v=>v.id === route.params.id)//直接找find，会返回一个对象
//这个时候提示"此条件将始终返回false"，因为类型"number"和string|string[]没有重叠
//我们知道他的类型是RouteParams，所以我们要进入源码进行寻找原因了，此时进度条在8分08秒
//我们在源码中找到RouteParams，看到他的类型是RouteParamValue|RouteParamValue[]
//RouteParamValue类型是等于string的，数字的话，三个等于号的情况下将永远不会等于字符串。所以我们这里使用Number
const item = data.find(v=>v.id === Number(route.params.id))//在data中找我们需要的东西

//改变前
//<div>品牌：{{ route.params?.name }}</div>
//<div>价格：{{ route.params?.price }}</div>
//<div>ID：{{ route.params?.id }}</div>
//改变后
<div>品牌：{{ item?.name }}</div> //记得要加上问号，这是可选的意思，不然要是没有name岂不是要爆错，所以要是找不到就不要了，给自己留个余地
<div>价格：{{ item?.price }}</div>
<div>ID：{{ item?.id }}</div>

//代码块1
const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        //动态路由参数
        path:"/reg/:id",//注意冒号后面的id，这个就是要对应上的部分
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

//举例
//定义一个数组，有两条数据
  companyOptions: [
    {
      label: '饿了么',
      value: 0,
    },
    {
      label: '美团',
      value: 1,
    },
  ]
//需要找到value为1，label为美团的数组
let obj=this.companyOptions.find(item=>item.value===1)

const routes: Array<RouteRecordRaw> = [
    {
        path: "/user",//一级路由
        component: () => import('../components/footer.vue'),
        children: [//注意看，嵌套路由的写法是数组里面装对象的形式
            {
                path: "",//嵌套路由1号(也叫做二级路由)
                name: "Login",
                component: () => import('../components/login.vue')
            },
            {
                path: "reg",//嵌套路由二号
                name: "Reg",
                component: () => import('../components/reg.vue')
            }
        ]
    },
 
]