文档章节

Vue中路由管理器Vue Router使用方式(二)-推荐

tianma3798
 tianma3798
发布于 2018/10/17 21:59
字数 368
阅读 40
收藏 4

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件

使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI

1.创建项目

vue create hello2

创建过程比较慢,需要稍等片刻。提示选择模板地方使用默认就可以了。

2.添加插件

vue add router

添加过程中,提示是否使用模块方式编程,选择yes就可以了

3.运行项目

npm run serve

运行成功后就可以开发调试了。

创建成功后的项目

创建成功后,会自动下载插件,并生成router.js文件,用于配置路由:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

更多:

Vue中路由管理器Vue Router使用方式(一)

Element UI框架+Vue开发搭建示例

VSCode 搭建Vue开发环境之Vue CLI

© 著作权归作者所有

共有 人打赏支持
tianma3798
粉丝 11
博文 118
码字总数 33312
作品 0
济南
高级程序员
私信 提问
Vue element 二级菜单绑定示例

一、element ui 中动态绑定二级菜单示例 1.视图绑定 显示结果: 更多: Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐 Vue中路由管理器Vue Route...

tianma3798
2018/10/18
0
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 在js中使用: 二、路由链接使用 1.使用router-link 定义跳转链接 2.使用js跳转 更多示例: 更多: Vue中路由管理器V...

tianma3798
2018/10/17
0
0
Vue element 表格获取选中项操作

一、在使用element table表格时,获取选中项处理 1.视图 2.js 更多: Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐...

tianma3798
2018/10/18
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
2018/10/16
0
0
Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟
2018/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一枚戒指,一场仪式,这件事阿里巴巴坚持了15年

为入职满五年的员工举行盛大仪式,为他们每个人戴上私人订制的戒指,是阿里巴巴坚持了15年“五年陈”的传统。1月22日,阿里集团为最新一季的“五年陈”们举行了授戒仪式。 2018五年陈小档案 ...

阿里云官方博客
32分钟前
2
0
前后端常见的几种鉴权方式

什么是鉴权 鉴权是指验证用户访问系统的权力 常用的鉴权有四种: HTTP Basic Authentication session-cookie Token 验证 OAuth(开放授权) HTTP Basic Authentication 这种授权方式是浏览器遵...

小草先森
34分钟前
3
0
Spring Cloud 微服务搭建注意的几个点

参考教程 https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f1-eureka/ 1)@EnableEurekaServer 引入标红,引入失败 ; @EnableEurekaClient 亦同 其中会出现 @EnableEurekaServer 引入......

阿白
40分钟前
3
0
PyCharm入门教程——在编辑器中打开和重新打开文件

PyCharm最新版本下载 JetBrains PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外,该IDE提供了一些高级功能,以用于Django框架下的专业Web...

电池盒
43分钟前
2
0
数据生产与收集

数据 对于移动端的app来说, 分析的数据大致上都可以分为俩种, 一种是在线数据,一种是离线数据。 在线数据, 即app后端服务所产生的日志数据,例如服务接口的性能数据, 服务接口的调用及其...

hblt-j
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部