文档章节

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

tianma3798
 tianma3798
发布于 2018/10/16 22:32
字数 345
阅读 35
收藏 3

一、在模块编程中安装VueRouter

1.Npm安装vue-router

npm install vue-router

2.在main.js中引用并使用VueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.定义路由,创建路由实例

/**
 * 定义路由,懒加载处理
 */
const routes = [
  { path: '/index', component: () => import('./components/Index.vue') },
  { path: '/test', component: () => import('./components/Test1.vue') }
];
//创建路由实例
const router = new VueRouter({
  routes
});

4.注册路由实例

//注册路由实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

二、Vue Router基础使用示例

1.App.vue 页面定义,使用router-link定义链接,使用router-view定义视图占位符

<template>
  <div id="app">
    <el-row>
      <router-link to="/index">
          <el-button>首页</el-button>
      </router-link>
      <router-link to="/test">
         <el-button type='primary'>测试页面</el-button>
      </router-link>
    </el-row>
    <router-view></router-view>
  </div>
</template>

2.main.js,程序启动注册路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import './plugins/element.js'

Vue.config.productionTip = false
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
/**
 * 定义路由,懒加载处理
 */
const routes = [
  { path: '/index', component: () => import('./components/Index.vue') },
  { path: '/test', component: () => import('./components/Test1.vue') }
];
//创建路由实例
const router = new VueRouter({
  routes
});
//注册路由实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

更多 :

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

VSCode 搭建Vue开发环境之Vue CLI

Vue相关UI框架整理

© 著作权归作者所有

共有 人打赏支持
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使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
2018/10/17
0
0
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
2018/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql grant 用户权限总结

用户权限管理主要有以下作用: 1. 可以限制用户访问哪些库、哪些表 2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、DELETE、ALTER等操作 3. 可以限制用户登录的IP或域名 4. 可以限制用...

Airship
26分钟前
1
0
RabbitMQ学习(3)

1. 消费端 1. 消费端通过推模式或者拉模式从RabbitMQ中获取并消费消息,当消费者确认处理消息后,可以手动确认消息已被接收,然后就会将该消息从RabbitMQ的队列中标记再清除,消费者端还可以...

江左煤郎
36分钟前
1
0
linux mysql(5.7)开启慢查询

一、有3个配置需要设置, 1:相关开关 2:日志目录文件 3:慢查询的时间限制 二、设置完之后重启mysql service mariadb restart 三、重启后做个测试 连接mysql 并查询: select sleep(6); 四...

chro008
44分钟前
1
0
选择IDC机房、选择硬件、上架服务器、装系统

选择IDC机房 当业务量比较大的时候,往往选用IDC而不是公有云来跑业务。 IDC机房的服务一般分为两种 需要我们自己购买服务器和网络设备,托管到IDC机房。IDC机房会提供布线、巡检、硬件操作等...

李超小牛子
46分钟前
2
0
《傲慢与偏见》的读书笔记与读后感作文2400字

《傲慢与偏见》的读书笔记与读后感作文2400字: 作者:孙苑馨;笔者按:读书这个习惯是我爸妈养出来的。小时候父母赚的钱除了吃饭穿衣剩下的就是买书了,他们除了买各种新鲜出版的文艺派图书...

原创小博客
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部