电商项目实战前篇07 – vue-router的使用(路由)

电商项目实战前篇07 – vue-router的使用(路由)组件之间如何切换?这个问题想过没有?因为是SPA单页面文件,所以对于组件的来回切换时之前占了一个坑的(router-view),这个坑一定是组件

大家好,欢迎来到IT知识分享网。

组件之间如何切换?这个问题想过没有?因为是SPA单页面文件,所以对于组件的来回切换时之前占了一个坑的(router-view),这个坑一定是组件来填满,那么组件如何切换呢,今天咱们来学习vue-router。

他的基本步骤是这样的:

1 引入vue-router 2 创建router实例,规划路由 3 创建不同组件 4 使用router-view渲染不同组件

那么直接来写代码吧:

1 首先是vue三部曲,创建一个html文件,然后引入vue,创建div,创建vue实例

电商项目实战前篇07 - vue-router的使用(路由)

2 安装vue-router

命令行 npm i vue-router -S 安装之后就可以用了

3 引入vue-routerjs

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

4 实现了一个基本的布局,头部和左右部分

电商项目实战前篇07 - vue-router的使用(路由)

写完css之后的效果图:

电商项目实战前篇07 - vue-router的使用(路由)

然后规划一下路由

电商项目实战前篇07 - vue-router的使用(路由)

其中左边为菜单项,可以规划为router-link(其实相当于一个a标签),但是它神奇就是神奇在通过他可以影响主界面的router-view

  • <router-view>是一个占位符,用对应的组件来替换
  • <router-link>指定跳转的URL地址

挂载router对象到vue实例中

const router = new vuerouter{}

电商项目实战前篇07 - vue-router的使用(路由)

在router对象中主要包含route路由规则,

一条路由规则一般由3部分组成

  • path: URL地址
  • name: 别名(可以不写)
  • component: 对应的组件, 一个对象(组件参数)

routes是路由规则, 是一个数组

每个元素都是一条具体的路由规则(route), 使得路由和组件绑定.

因此在vue内部使用this.$route表示路由规则

使用this.$route.params获取路由规则中的参数

当URL匹配到路由规则时, 使用对应的组件替换<router-view>中的内容

现在理一下,其实就是在引入vue-router之后,创建router对象,在对象里面设定url和组件路径,然后挂载,只要是挂载之后,通过router-link就可以跳到相关的组件了。

创造两个组件,然后也挂载在vue上面,这样就可以根据路由去跳组件了

电商项目实战前篇07 - vue-router的使用(路由)

切记:如果组件是其他文件的,按照文件引用就可以了

那么vue-router就写到这里了,下期咱们来聊聊vue中的v-for和v-if,我是黑胖哥,如果对您有帮助,请关注点赞评论转发,谢谢!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/39197.html

(0)
上一篇 2024-04-12 15:15
下一篇 2024-04-18 07:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信