文档章节

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

tianma3798
 tianma3798
发布于 10/17 21:59
字数 368
阅读 13
收藏 3

一、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
粉丝 9
博文 108
码字总数 30358
作品 0
济南
高级程序员
私信 提问
Vue element 二级菜单绑定示例

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

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

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

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

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

tianma3798
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
10/16
0
0
Vue2.0之vue-router

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

浪里行舟
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

phpstorm xdebug 配置

xdebug方便了调试代码,比起一个一个地方的打印结果还是debug看的更明白下面介绍下maxOS系统下的debug配置 下载 https://xdebug.org/download.php 点击红线部分进入,粘贴phpinfo()信息推荐适...

被猪拱了的JAVA
30分钟前
2
0
Golang学习笔记(1)

基本知识 golang的文件格式以go结尾。 运行方式 go run main.go 用于开发调试使用 编译成二进制文件 go build main.go 会生成一个可执行的二进制文件 变量 变量定义的形式 Golang的变量定义有...

ExtreU
44分钟前
1
0
基于Kafka构建事件溯源模式的微服务

概要 本文中我们将讨论如何借助Kafka实现分布式消息管理,使用事件溯源(Event Sourcing)模式实现原子化数据处理,使用CQRS模式(Command-Query Responsibility Segregation )实现查询职责...

架构师springboot
50分钟前
2
0
git上传项目步骤

https://blog.csdn.net/m0_37725003/article/details/80904824

fame_yao
51分钟前
2
0
NOOBS自定义安装多系统

一、预置条件: 宿主系统是win10_x64 virtual box 虚拟机,安装了centos7 树莓派的系统安装工具:NOOBS_v2_9_0.zip,镜像文件 二、根据镜像文件生成boot.tar.xz 和root.tar.xz 1、设置共享目...

mbzhong
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部