使用vue-router完成简单导航功能【推荐】

前端之家收集整理的这篇文章主要介绍了使用vue-router完成简单导航功能【推荐】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue-router是Vue.js官方提供的一套专用的路由工具库

安装命令如下

vue-router 实例是一个Vue插件,我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中。

在我们的工程中,,main.js是默认的程序入口文件,所有的全局配置都会在这个文件中进行。

我们在main.js中加入如下引用

这样就完成了 vue-router最基本的安装工作了。

接下来我们要实现的功能描述如下

首页上有两个链接分别是:购物车和个人中心

点击不同的链接显示不同的内容

首先我们在 src 目录下建立两个组件文件: Cart.vue Me.vue

新建的两个组件文件内容暂时都是同样的结构

购物车

猜你在找的Vue相关文章