0
点赞
收藏
分享

微信扫一扫

Vue ——06、vue-router

悬灸人雪洋 2022-02-10 阅读 79

webpack使用

一、说明

学习的时候,尽量的打开官方的文档

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成, 让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5 历史模式或hash模式, 在IE 9中自动降级
  • 自定义的滚动行为

二、安装vue-router

首先,我们打开我们之前建的 myvue 项目,把一些东西都删掉,就只剩这两个文件
在这里插入图片描述

先查看node modules中是否存在vue-router
在这里插入图片描述
vue-router是一个插件包, 所以我们还是需要用npm来进行安装的,npm不行就换cnpm

在这里插入图片描述
安装完成后出现
在这里插入图片描述
接着,我们就可以使用了

在这里插入图片描述
我们随便创建一个文件看一下,加了作用域,它就只在当前模板生效
在这里插入图片描述

三、vue-router使用

我们首先创建两个组件

在这里插入图片描述

创建一个路由配置,路由就是页面的跳转,脑瘫一点的说

在这里插入图片描述
把路由给它配置进去

在这里插入图片描述
接着,我们就可以用了,在app.vue

在这里插入图片描述
我们输入命令,等它编译完成
在这里插入图片描述
访问一下,OK

在这里插入图片描述

狂神说Vue视频笔记 + 自己的见解

————————

如觉不错,随手点赞,关注,收藏(* ̄︶ ̄),谢谢~~

举报

相关推荐

[Vue]Vue-router

Vue-router

搞懂vue-router

vue-router路由

Vue-router学习

0 条评论