一、环境搭建

1.1 安装router

npm i vue-router

1.2 定义路由

定义了两个路由路径

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";

const routes:Array<RouteRecordRaw> = [{
    path:"/",
    component:()=>import("../components/A.vue")
},{
    path:"/b",
    component:()=>import("../components/B.vue")
}]


const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

1.3 引入路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

export const app =  createApp(App)
app.use(router)
app.mount('#app')

1.4 使用路由

<template>
    <!-- 路由出口，路由匹配的组件将会渲染在这里 -->
    <router-view></router-view>

    <router-link to="/">to a</router-link>
    <br>
    <router-link to="/b">to b</router-link>

</template>

<script setup lang='ts'>


</script>

二、路由模式

2.1 createWebHashHistory

请求的路径中会加上#

可以通过监听hashchange，观察路由的变化

window.addEventListener('hashchange',(e)=>{
    console.log(e)
})

2.2 createWebHistory

此时请求的路由没有#

三、命名路由

路由路径使用自定义的name定义，可以避免路径写错

四、编程式导航

路由的跳转也可以使用 router.push(xxxx)

4.1 传入字符串

<template>
    <!-- 路由出口，路由匹配的组件将会渲染在这里 -->
    <router-view></router-view>

    <button @click="toPage('/')">to a</button>
    <button @click="toPage('/b')">to b</button>
</template>

<script setup lang='ts'>
import {useRouter} from 'vue-router'

const router = useRouter()
const toPage = (url:string)=>{
    router.push(url)
}

</script>

4.2 传入对象

<template>
    <!-- 路由出口，路由匹配的组件将会渲染在这里 -->
    <router-view></router-view>

    <button @click="toPage('/')">to a</button>
    <button @click="toPage('/b')">to b</button>
</template>

<script setup lang='ts'>
import {useRouter} from 'vue-router'

const router = useRouter()
const toPage = (url:string)=>{
    router.push({
        path:url
    })
}

</script>

4.3 传入name

<template>
    <!-- 路由出口，路由匹配的组件将会渲染在这里 -->
    <router-view></router-view>

    <button @click="toPage('aaa')">to a</button>
    <button @click="toPage('bbb')">to b</button>
</template>

<script setup lang='ts'>
import {useRouter} from 'vue-router'

const router = useRouter()
const toPage = (url:string)=>{
    router.push({
        name:url
    })
}

</script>

五、处理历史记录

默认情况下每次路由跳转都会记录到历史

5.1 无需记录历史记录

在router-link中加上replace

使用编程式导航时，将push替换为replace方法即可

5.2 跳转到上一次和下一次

<template>
    <!-- 路由出口，路由匹配的组件将会渲染在这里 -->
    <router-view></router-view>

    <button  @click="toPage('aaa')">to a</button>
    <button  @click="toPage('bbb')">to b</button>
    <br>
    <button @click="prev">上一个</button>
    <br>
    <button @click="next">下一个</button>
</template>

<script setup lang='ts'>
import {useRouter} from 'vue-router'

const router = useRouter()
const toPage = (url:string)=>{
    router.push({
        name:url
    })
}


const next = ()=>{
    router.go(1)
}

const prev = ()=>{
    router.back()
}

</script>

六、路由传参

6.1 简单案例

6.1.1 模拟数据

6.1.2 以query方式带参路由跳转

<style >

</style>

<template>
 <div v-for="item in data">
    {{ item.id }}--{{ item.name }}--{{ item.price }}
    <button @click="toDetail(item)">详情</button>
    <br>
</div>


</template>

<script setup lang="ts">
import router from '../router';
import {data} from './list.json'
type Item = {
  name: string;
  price: number;
  id: number;
}

function toDetail(item:Item){
    router.push({
        name:'detail',
        query:item
    })
}

</script>

6.1.2.1 接受路由参数

6.1.2.2 效果演示

6.1.3 以params方式带参路由跳转

和query的区别为：

1.不会在顶部路由路径展现参数

2.由于参数该种方法是将参数存在内存中，刷新页面后参数将会丢失

3.必须使用name指定将要跳转的路由

6.1.3.1 为路由添加id变量

6.1.3.2 路由跳转

每次跳转的时候将会携带对应的id

6.1.3.3 显示路由

<template>
        <div>编号：{{ item?.id }}</div>
        <div>标题：{{ item?.name }}</div>
        <div>价格：{{ item?.price }}</div>
        <div><button @click="router.back()">返回</button></div>
</template>

<script setup lang="ts">
import {data} from './list.json'
import {useRoute,useRouter} from 'vue-router'

const router = useRouter()
const route = useRoute()

const item = data.find(v=>v.id === Number(route.params.id))

</script>

6.1.3.4 效果演示

七、嵌套路由

7.1 创建父节点页面

7.2 修改路由

为需要添加子节点的模块添加children

此时页面效果如下：

八、命名视图

若有两个详情页，他们展示的效果不一样，可以使用命名路由

8.1 修改路由

8.2 父模块调用子模块

8.3 效果演示

九、重定向-别名

9.1 重定向

访问父路由时，会自动重定向到子路由

9.1.1 字符串形式

9.1.2 对象形式

9.1.3 函数形式

9.2 别名

路径的别名

Vue Router路由（一）