Vue 路由的基本应用

作者：张三丰无极

2023-06-09
北京
本文字数：1732 字
阅读完需：约 6 分钟

路由的基本应用

做一个简单的路由应用

1 编写基本代码

2 引入 bootstrap.css

所有相关的样式，都是引入的 bootstrap.css

3 创建组件

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

4 安装路由器

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

vue-router 版本问题

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

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

npm i vue-router@3

复制代码

安装的很快，几秒钟的事

5 引入使用路由

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

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

复制代码

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

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

6 创建路由器

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

我们也在项目中创建下

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

// 该文件专门用于创建整个应用的路由器
// 引入路由器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},            ]})

复制代码

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

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

如下所示:

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

7 router-link 标签

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

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

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

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

我们可以把 active 的高亮效果配置到 active-class="active"中，这样点击哪个导航哪个导航就高亮了

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

这是因为没有页面不知道在哪里展示，类似于插槽，但是这里不用 slot 标签，而是 router-view 标签

8 router-view 标签

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

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

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

  <!-- 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>

复制代码

9 总结

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

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

3 编写 router 配置项:

//引入VueRouterimport 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                }        ]})
//暴露routerexport default router

复制代码

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

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

复制代码

5 指定展示位置

<router-view></router-view>

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/c64eded33af92318de8765019】。文章转载请联系作者。

张三丰无极

关注

还未添加个人签名 2022-10-26 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue 路由的基本应用

路由的基本应用

1 编写基本代码

2 引入 bootstrap.css

3 创建组件

4 安装路由器

vue-router 版本问题

5 引入使用路由

6 创建路由器

7 router-link 标签

8 router-view 标签

9 总结

张三丰无极

评论