Vue安装并使用路由和路由器实现页面跳转

红太狼 2023-09-23 23:09 114阅读 0赞

## 前言 ##

想要使用路由和路由器实，必须要知道什么是路由和路由器，可以参考这篇文章：[Vue路由和路由器简介][Vue]

下面通过编写代码演示一下如何使用路由和路由器实现页面跳转。

## 引入bootstrap.css ##

本案例所有相关的样式，都是引入的bootstrap.css(因为自己懒得写样式)

![在这里插入图片描述][bee9c9e941cf4643acbe309ef0120d10.png]

## 创建组件 ##

想要实现路由跳转，首先必须要有跳转的组件，接下来就创建两个组件

![在这里插入图片描述][72b40a349a2b4d2cb88193e7a08e8a02.png]

## 安装路由器 ##

想要使用路由以及路由器，首先需要安装它，但是安装之前需要考虑一个版本问题

### vue-router版本问题 ###

2022年2月7日以后，vue-router的默认版本升级为4版本，并且vue-router只能作用于vue3中，vue\_router3才能在vue2中使用，如果把vue-router4强行安装在vue2中，就会以下报错：

![在这里插入图片描述][8cc0944dd15947038bbde881a95af91a.png]

我目前使用的是vue2，所以需要去使用vue-router3版本进行安装，打开终端，输入命令并指定vue-router3版本

npm i vue-router@3

安装的很快，几秒钟的事

![在这里插入图片描述][5372f314e20b44d0bfce89d9b1426cbc.png]

## 引入使用路由 ##

vue-router是一个插件库，所以需要引入并使用

![在这里插入图片描述][e206dc7a4b114b81a690690957d98de7.png]

// 引入VueRouter插件
    import VueRouter from 'vue-router'
    // 使用VueRouter插件
    Vue.use(VueRouter)

到了这里，就可以使用全新的配置项：router

![在这里插入图片描述][250ba961af0b40bcb71cbf68ee7d3d35.png]  
但是报错了，原因是因为没有识别不出来路由器，所以需要创建路由器

![在这里插入图片描述][ca08099bf0d1491aa2cefd7b31582b8a.png]

## 创建路由器 ##

如果用了vue-router都有一个叫router的文件夹,里面有一个index.js,这个文件专门打造路由器

我们也在项目中创建下

![在这里插入图片描述][04c43affddfd4222a8a919694597e423.png]  
在里面进行编码，引入组件，配置组件路径，暴露文件等工作，下图所示都是一级路由，其实路由也可以嵌套(多级)

![在这里插入图片描述][6f79aa8a79a041d89989ced0ee95358d.png]

// 该文件专门用于创建整个应用的路由器
    
    // 引入路由器
    import VueRouter from "vue-router"
    // 引入组件
    import Abotu from '../components/About.vue'
    import Home from '../components/Home.vue'
    // 创建并且暴露文件一个路由器
    export default new VueRouter({
        
        // 配置路由 本质是一个数组，在里面配置多组路由，每一个路由都是一个key和value映射对象
        routes:[
            {
        path:'/about',component:About},
            {
        path:'/home',component:Home},
            
        ]
    })

这样一个真实的路由就完成了，把真实的路由进行配置

![在这里插入图片描述][bcd2715eb78046a5991127e18cb08640.png]  
判断路径是否配置成果的标志就是看url是否有一个\#的路径

如下所示:

![在这里插入图片描述][2472fbb7978a4c43b31d762b1a3dcbc4.png]

这样一个路由器就配置完成并且可以工作了，接下来就是配置点击不同的导航进入不同的组件了

## router-link标签 ##

原始html中 我们使用a标签实现页面的跳转

![在这里插入图片描述][ec4d9f274678497385b1365c5a2e416e.png]  
但是使用路由的时候，不同再使用a标签进行跳转，而是插件库提供的标签： router-link和to

router-link替代a标签，to属性替代href属性，并且to的值就是在路由器中配置的路由对应的path值

router-link最终也会被插件库转化为a标签，但是我们不同直接写a标签

![在这里插入图片描述][28235114aa1641f9b332fc0a4f9dc4a7.png]

![在这里插入图片描述][9f4bf302702f437ca6f1dc0267183259.png]  
我们可以把active的高亮效果配置到 active-class="active"中，这样点击哪个导航哪个导航就高亮了(这是bootstrap里面的样式，可以直接用)

![在这里插入图片描述][844e5b85f10c46cb995117bb010b98e9.png]

但是现在虽然路径可以切换，但是并没有跳到对应的组件中

![在这里插入图片描述][0def535ee1454d77a99566f4327dc12d.png]  
这是因为没有页面不知道在哪里展示，类似于插槽，但是这里不用slot标签，而是router-view标签

## router-view标签 ##

router-view标签用于指定组件的呈现位置

![在这里插入图片描述][cedc4820357e4f4ca7a6b9e9f1078edf.png]

这样点击哪个导航，不仅可以跳到对应的组件路径，也可以展示对应的内容了

![在这里插入图片描述][bdc2b5a9c7c346a98b45599589eef157.png]  
![在这里插入图片描述][d1996f325f924f5094a3689485a6f762.png]  
这样一个简单的路由就使用完成了

<router-link class="list-group-item" active-class="active" to="/about">About</router-link> 
              <router-link class="list-group-item" active-class="active" to="/home">Home</router-link> 
                 
                <router-view></router-view>

## 总结 ##

1 安装vue-router，命令：npm i vue-router

2 应用插件：Vue.use(VueRouter)

3 编写router配置项:

//引入VueRouter
    import VueRouter from 'vue-router'
    //引入Luyou 组件
    import About from '../components/About'
    import Home from '../components/Home'
    
    //创建router实例对象，去管理一组一组的路由规则
    const router = new VueRouter({
        
            routes:[
                    {
        
                            path:'/about',
                            component:About
                    },
                    {
        
                            path:'/home',
                            component:Home
                    }
            ]
    })
    
    //暴露router
    export default router

4 实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

5 指定展示位置

<router-view></router-view>

[Vue]: https://blog.csdn.net/weixin_46713508/article/details/128790734
[bee9c9e941cf4643acbe309ef0120d10.png]: https://img-blog.csdnimg.cn/bee9c9e941cf4643acbe309ef0120d10.png
[72b40a349a2b4d2cb88193e7a08e8a02.png]: https://img-blog.csdnimg.cn/72b40a349a2b4d2cb88193e7a08e8a02.png
[8cc0944dd15947038bbde881a95af91a.png]: https://img-blog.csdnimg.cn/8cc0944dd15947038bbde881a95af91a.png
[5372f314e20b44d0bfce89d9b1426cbc.png]: https://img-blog.csdnimg.cn/5372f314e20b44d0bfce89d9b1426cbc.png
[e206dc7a4b114b81a690690957d98de7.png]: https://img-blog.csdnimg.cn/e206dc7a4b114b81a690690957d98de7.png
[250ba961af0b40bcb71cbf68ee7d3d35.png]: https://img-blog.csdnimg.cn/250ba961af0b40bcb71cbf68ee7d3d35.png
[ca08099bf0d1491aa2cefd7b31582b8a.png]: https://img-blog.csdnimg.cn/ca08099bf0d1491aa2cefd7b31582b8a.png
[04c43affddfd4222a8a919694597e423.png]: https://img-blog.csdnimg.cn/04c43affddfd4222a8a919694597e423.png
[6f79aa8a79a041d89989ced0ee95358d.png]: https://img-blog.csdnimg.cn/6f79aa8a79a041d89989ced0ee95358d.png
[bcd2715eb78046a5991127e18cb08640.png]: https://img-blog.csdnimg.cn/bcd2715eb78046a5991127e18cb08640.png
[2472fbb7978a4c43b31d762b1a3dcbc4.png]: https://img-blog.csdnimg.cn/2472fbb7978a4c43b31d762b1a3dcbc4.png
[ec4d9f274678497385b1365c5a2e416e.png]: https://img-blog.csdnimg.cn/ec4d9f274678497385b1365c5a2e416e.png
[28235114aa1641f9b332fc0a4f9dc4a7.png]: https://img-blog.csdnimg.cn/28235114aa1641f9b332fc0a4f9dc4a7.png
[9f4bf302702f437ca6f1dc0267183259.png]: https://img-blog.csdnimg.cn/9f4bf302702f437ca6f1dc0267183259.png
[844e5b85f10c46cb995117bb010b98e9.png]: https://img-blog.csdnimg.cn/844e5b85f10c46cb995117bb010b98e9.png
[0def535ee1454d77a99566f4327dc12d.png]: https://img-blog.csdnimg.cn/0def535ee1454d77a99566f4327dc12d.png
[cedc4820357e4f4ca7a6b9e9f1078edf.png]: https://img-blog.csdnimg.cn/cedc4820357e4f4ca7a6b9e9f1078edf.png
[bdc2b5a9c7c346a98b45599589eef157.png]: https://img-blog.csdnimg.cn/bdc2b5a9c7c346a98b45599589eef157.png
[d1996f325f924f5094a3689485a6f762.png]: https://img-blog.csdnimg.cn/d1996f325f924f5094a3689485a6f762.png