每个有http链接的页面可以理解为一个路由, 配置路由的目的是为了统一进行页面的管理，方便页面的跳转.

点击查看官方使用说明

点击查看官方Api文档

前置条件：

在开始学习之前，先准备两个界面，界面内存放最简单用于识别的代码即可，例如：

一、安装

路由作为Vue的插件，需要安装才可以进行使用

npm install --save vue-router

二、基础使用

1、新建一个router目录用于存放路由相关文件 2、router目录下新建一个index.js文件用于存放路由配置。配置文件内容如下：

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

// 导入创建的页面
import home from "../views/home.vue"
import project from "../views/project.vue"

// 配置路由
const routes = [
    {
        path: "/",
        component: home
    },
    {
        path: "/project",
        component: project
    }
]

// 使用配置
const router = createRouter({

    history: createWebHistory(),
    routes  // 使用配置的路由
})

// 导出路由
export default router

上述的路由配置中将初始建的两个页面都配置了进去

3、main.js中使用路由模块

import {createApp, ref} from 'vue'
import App from './App.vue'

// 导入新建的路由
import router from "./router/index";

const app = createApp(App)
// 使用路由
app.use(router)
app.mount('#app')

4、app.vue中调用路由

<script setup>

</script>
<template>
    <!--通过link来进行组件导航-->
    <!--通过to导航到对应页面-->
    <router-link to="/">首页</router-link>
    |
    <router-link to="/project">项目页</router-link>
    <!--显示路由-->
    <router-view></router-view>
</template>

完整代码如下:

效果预览：

上述的示例中是在模板内进行页面切换的，那如果我们期望可以在 script内进行页面切换要怎么做呢? 修改app.vue如下：

<script setup>
import router from "@/router";

// 切换页签
function tabViewHandle(view){
    router.push(view)
}
</script>
<template>
    <button @click="tabViewHandle('/')">首页</button>
    <button @click="tabViewHandle('/project')">项目</button>
    <!--显示路由-->
    <router-view></router-view>
</template>

效果如下：

三、路由参数传递

很多时候， 我们可能希望一个页面被尽可能的复用。 以此来减少相似度比较高的页面的重复开发。此时我们可以使用传递参数的方式来完成

修改index.js里配置的路由如下：

// 配置路由
const routes = [
    {
        path: "/",
        component: home
    },
    {
        // 通过使用冒号的方式来添加参数
        path: "/project/:id",
        component: project
    }
]

修改app.vue内容如下：

<script setup>
import router from "@/router";

// 切换页签
function tabViewHandle(view){
    // 也可以通过这种方式去带参数
    // roiter.push({path:viwe})
    // roiter.push({name:viweName, params: {id: 1}})  // 这里的viewName会在命名路由中进行说明
    router.push(view)
}
</script>
<template>
    <button @click="tabViewHandle('/')">首页</button>
    <button @click="tabViewHandle('/project/1')">项目1</button>
    <button @click="tabViewHandle('/project/2')">项目3</button>
    <!--显示路由-->
    <router-view></router-view>
</template>

修改project.vue内容如下：

<script>
</script>
<template>
    <!--使用$route.params.xx可以获取对应路由属性-->
    <!--该示例中使用$route.params.id来获取跳转到页面的id的值-->
    <p>项目{{$route.params.id}}页面</p>
</template>

完整代码：

效果预览：

如上，就可以通过传参的方式, 拿对应值到数据库中取出对应数据对界面进行渲染，来完成通用界面的调用。

五、路由嵌套

有时我们希望一个页面中嵌套多个公共组件，可以使用下述方式进行

1、新建一个ChildProject.vue文件，放最简单代码

<script>
</script>
<template>
    <p>项目子页面</p>
</template>

2、index.vue中将ChildProject.vue配置为project.vue的子页面

// 配置路由
const routes = [
    {
        path: "/",
        component: home,
    },
    {
        path: "/project/:id",
        component: project,
        // 通过添加在children中添加子路由，可以添加多个，子路由下面也可以在加子路由
        children: [
            {

                // 调用的时候路径需要拼接父级路由的path
                path: "childProject",
                component: childProject
            }
        ]
    },
]

3、修改project.vue， 添加显示路由

<script>
</script>
<template>
    <p>项目{{$route.params.id}}页面</p>
    <!--显示路由-->
    <router-view></router-view>
</template>

4、修改app.vue, 添加一个切换到子路由的按钮

<script setup>
import router from "@/router";

function tabViewHandle(view){
    router.push(view)
}
</script>
<template>
    <button @click="tabViewHandle('/')">首页</button>
    <button @click="tabViewHandle('/project/1')">项目1</button>
    <button @click="tabViewHandle('/project/2')">项目2</button>
    <!--添加一个显示子路由的按钮-->
    <button @click="tabViewHandle('/project/2/childProject')">项目子页面</button>
    <router-view></router-view>
</template>

修改后完整代码如下：

运行查看效果

六、命名路由

除了使用path外，我们还可以用name去命名路由，使用路由的时候用name去代替path

1、修改index.vue，添加路由命名

// 配置路由
const routes = [
    {
        path: "/",
        name: "home",
        component: home,
    },
    {
        path: "/project/:id",
        name: "project",
        component: project,
        children: [
            {
                path: "childProject",
                name: "childProject",
                component: childProject
            }
        ]
    },
]

2、修改app.vue，使用name进行导航

<script setup>
import router from "@/router";

function tabViewHandle(view){
    router.push(view)
}
</script>
<template>
    <!--html中使用命名路由html跳转-->
    <router-link :to="{name:'home'}">命名路由html首页</router-link>
    <button @click="tabViewHandle('/')">首页</button>
    <button @click="tabViewHandle('/project/1')">项目1</button>
    <button @click="tabViewHandle('/project/2')">项目2</button>
    <!--html中使用命名路由带参数的html跳转-->
    <router-link :to="{name:'project', params:{id: '3'}}">命名路由html项目3</router-link>
    <button @click="tabViewHandle('/project/2/childProject')">项目子页面</button>
    <router-view></router-view>
</template>

**注意：**上述修改vue只是修改了router-link的跳转, 没有修改push的导航，push的方法使用路由传递跟router-link一样

修改后的完整代码如下：

效果如下：

七、命名视图

上述的例子中都是一个页面中显示一个子页面，但是有时候我们希望一个界面可以显示多个页面，这个时候可以使用命名视图的方式完成

1、修改app.vue添加两个命名视图

<!--添加两个命名视图-->
<router-view name="view1"></router-view>
<router-view name="view2"></router-view>

修改index.js,绑定命名视图

// 配置路由
const routes = [
    {
        path: "/",
        name: "home",
        // component: home,
        components: {
            default: home,  // 没有视图命名则为default
            view1: home,    // 有视图命名则用 name:component 的格式
            view2: project
        }

    },
    {
        path: "/project/:id",
        name: "project",
        component: project,
        children: [
            {
                path: "childProject",
                name: "childProject",
                component: childProject
            }
        ]
    },
]

完整代码如下图

效果预览：

上述的例子中可以看到，首页上总共绑定了两个个home组件和一个project组件

八、重定向

重定向的意思让所有本该访问A页面的请求全部去访问B页面

比较简单，不看效果了

九、导航守卫

导航守卫可以理解为页面跳转的钩子，当页面跳转中的意思。可以在导航守卫内添加逻辑去让跳转的时候去进行一些校验，比如说验证登录状态。

准备三个界面，分别为 登录页、首页、项目页，页面代码如下（自己配置一下对应的路由）：

上述代码一下的效果如下：

现在来添加一个手动的简单的导航守卫：复制以下代码到index.js

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

// 导入创建的页面
import login from "../views/login.vue"
import home from "../views/home.vue"
import project from "../views/project.vue"

// 配置路由
const routes = [
    {path: "/", name: "login", component: login},
    {path: "/home", name: "home", component: home},
    {path: "/project", name: "project", component: project}
]

// 使用配置
const router = createRouter({
    history: createWebHistory(),
    routes  // 使用配置的路由
})

// 配置导航守卫
const loginState = true // 假装它是登录状态把
router.beforeEach((to, from)=>{
    // 如果当前是没有登录权限的状态，并且大行不处于 login页
    if (!loginState && to.name !=='login'){
        return {name: 'login'}
    }
})

// 导出路由
export default router

通过上述例子可以看出，当登录状态发生变化时，页面跳转到了登录页。并且无法再登录上去

注意：除了上述的例子外：

• 导航守卫类型还分：解析守卫-beforeResolve（貌似是导航时钩子）、后置钩子-afterEach（导航后守卫）
• 上述的配置方式为全局配置，还可以：路由内配置、组件内配置

这些都不在此演示了。感兴趣的话可以在官网查看

十、路由懒加载

上述的例子中，index.js中都是一开始就import了对应的组件。这样会增加程序的启动成本。懒加载的意思是，只有用到的时候才让他进行加载。懒加载写法：

// 配置路由
const routes = [
    {path: "/", name: "login", component: ()=>import("../views/login.vue")},
    {path: "/home", name: "home", component: ()=>import("../views/home.vue")},
    {path: "/project", name: "project", component: ()=>import("../views/project.vue")}
]

根据懒加载的配置方式，改造一下之前的额代码，然后看下效果

非懒加载演示：

懒加载演示：

通过上述的对比应该很容易发现区别

十一、动态路由

上述的所有示例， 路由都是通过routes在index.js中添加好的。也许会有在使用过程中添加路由的需求。此时可以使用动态路由。

通过下述方法添加和移除：

router.addRoute()
router.removeRoute()

考虑到使用场景较少，这里就不进行展示了。