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

小就是我
125 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

前言

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

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

引入bootstrap.css

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

image.png

创建组件

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

image.png

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

vue-router版本问题

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

image.png

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

npm i vue-router@3

安装的很快，几秒钟的事

image.png

引入使用路由

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

image.png

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

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

image.png

但是报错了，原因是因为没有识别不出来路由器，所以需要创建路由器

image.png

创建路由器

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

我们也在项目中创建下

image.png

在里面进行编码，引入组件，配置组件路径，暴露文件等工作，下图所示都是一级路由，其实路由也可以嵌套(多级)

image.png

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

image.png

判断路径是否配置成果的标志就是看url是否有一个#的路径

如下所示:

image.png

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

router-link标签

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

image.png

但是使用路由的时候，不同再使用a标签进行跳转，而是插件库提供的标签： router-link和to

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

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

image.png

image.png

我们可以把active的高亮效果配置到 active-class="active"中，这样点击哪个导航哪个导航就高亮了(这是bootstrap里面的样式，可以直接用)

image.png

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

image.png

router-view标签

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

image.png

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

image.png

image.png

这样一个简单的路由就使用完成了

  <!-- vue中借助router-link标签实现路由的切换 -->
          <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>
avatar
文章
阅读
粉丝