路由

路由的作用

路由相当于是path到不同组件的映射，通过点击不同的按键，进入不同的path，从而在特定的地方渲染出不同的组件，从而实现导航栏的创建

创建路由

在src文件夹下创建一个'router'文件夹，并在这个文件夹内创建一个index.ts文件

这个ts文件就是路由的核心文件

import {createWebHistory, createRouter} from 'vue-router'
import Test1 from '@/component/Test1.vue'
import Test2 from '@/component/Test2.vue'
import Test2 from '@/component/Test3.vue'
//引入对应的component
const router=createRouter({
    history: createdWebHistory(),//或者 history: createHashHistory()
    routes: [
        {
            path:'/test1',
            name:'test1',//可有可无
            component: Test1
        },
        {
            path:'/test2',
            name:'test2',//可有可无
            component: Test3
        },
        {
            path:'/test3',
            name:'test3',//可有可无
            component: Test3
        }
    ]
})
// createRouter 传入一个对象作为参数
export default router

在App.vue里面需要使用路由，并且设置好路由跳转连接（routerLink）,插件显示的地方（routerView)。才能正常显示。

<script lang="ts" setup>
    import {createApp} from 'vue'
    import {RouterLink, RouterView} from 'vue-router'
    import router form '@/router'
    const app=createApp()
    app.use(router)
    app.mount('#app')
</script>

<template>
<RouterLink :to='{link:'/test1'}'>test1 </RouterLink>
<RouterLink :to='{link:'/test2'}'>test2 </RouterLink>
<RouterLink :to='{link:'/test3'}'>test3 </RouterLink>
<!--下面是展示区-->
<RouterView></RouterView>
</template>

---

哈希模式

在创建router的时候除了选择createWebHistory，还可以是createHashHistory

---

命名路由

在创建router时，每一个路由可以取一个名字：

const router=reatedRouter({
history: createWebHistory,
routes:[
{
	name:'test',
	path:'/test',
	component:Test
}
]
})

在跳转的时候，可以选择对象型写法：

<template>
<RouterLink :to='{name: test}'> </RouterLink>
<template>

---

嵌套路由

希望在原来的RouterView之下再次实现导航的功能时，可以考虑嵌套路由, 只需要在 创建路由的时候，在需要二级（或多级）路由的地方加上children属性：

import {createWebHistory, createRouter} from 'vue-router'
import Test1 from '@/component/Test1.vue'
import Test2 from '@/component/Test2.vue'
import Test2 from '@/component/Test3.vue'
import Child1 from '@/component/Child1.vue'
//引入对应的component
const router=createRouter({
    history: createdWebHistory(),//或者 history: createHashHistory()
    routes: [
        {
            path:'/test1',
            name:'test1',//可有可无
            component: Test1
        },
        {
            path:'/test2',
            name:'test2',//可有可无
            component: Test2
            children: [
            {
            	path: 'child1',
            	component: Child1
            }
            ]
         
        },
        {
            path:'test3',
            name:'test3',//可有可无
            component: Test3
        }
    ]
})
// createRouter 传入一个对象作为参数
export default router

这样的话，就可以实现

---

传递参数

使用params

使用query

结合Props

---

编程式路由导航

有的时候我们希望在某些条件下实现路由跳转，即在某些条件下才跳转，就需要在js代码（script标签中）中实现在某些条件下才跳转，进行导航。

push与replace

push是在原来的路由记录的后面加上一条，replace是覆盖掉原先的记录。

区别在于，前者可以用浏览器左上角的'<-'和'->'来进行回溯或者撤回，但是replace不行。

push和replace都是RouterLink的属性，其中push是默认值

要设置replace，则需要在RouterLink标签中设置：

<RouterLink  replace > </RouterLink>

在script标签中操作路由

废话少说直接上代码：

<scirpt setup lang='ts'>
    import {useRouter} from 'vue-router'
    const router=useRouter
    router.push('path')
    /*push的参数是RouterLinkd的to*/
</scirpt>

这样就可以在script内部实现路由导航，具体是push还是replace可以按需选择。

---

重定向

在配置routes的时候可以加上‘/’的情况：

const router=createRouter({
    history: createdWebHistory(),//或者 history: createHashHistory()
    routes: [
        {
            path:'/test1',
            name:'test1',//可有可无
            component: Test1
        },
        {
            path:'/test2',
            name:'test2',//可有可无
            component: Test2
            children: [
            {
            	path: 'child1',
            	component: Child1
            }
            ]
         
        },
        {
            path:'test3',
            name:'test3',//可有可无
            component: Test3
        },
        {
    	path:'/',
    	redirect:'/test1'  //重定向到test1，使得没有点击任何一个路由时显示的是test1
         }
    ]
})

---

补充：

1. to除了有对象写法，还有字符串写法<RouterLink to='/test1'></RouterLink>  

---