码迷,mamicode.com
首页 > 其他好文 > 详细

Vue:vue-router路由

时间:2020-02-22 16:13:44      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:font   命令行   插件   info   strong   进入   核心   使用   vue   

说明

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

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

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

安装

  基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router

  vue-router 是一个插件包,所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。

    npm install vue-router --save-dev

  如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

  技术图片

测试

1. 在入口main.js 配置路由设置

技术图片

 2. 编写自定义组件

技术图片

技术图片

3. 配置路由转发

技术图片

4. 使用

 技术图片

启动测试一下 : npm run dev

路径是如何通过router找到对应组件的呢?简单画一个路径图

技术图片

 

详细学习,请去官方文档查看

Vue:vue-router路由

标签:font   命令行   插件   info   strong   进入   核心   使用   vue   

原文地址:https://www.cnblogs.com/FondWang/p/12345383.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!