文档章节

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

tianma3798
 tianma3798
发布于 10/16 22:32
字数 345
阅读 16
收藏 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
粉丝 9
博文 109
码字总数 30611
作品 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使用方式(二)-推荐

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

tianma3798
10/17
0
0
vue番外篇 -- vue-router浅析原理

近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么?...

DIVI
10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

AS连接网易Mumu模拟器

1、安装模拟器 打开这个网址现在模拟器然后安装 http://mumu.163.com/ 2、安装完成后启动模拟器 3、进入模拟器安装目录 例如本机的安装目录:C:\Program Files (x86)\MuMu\emulator\nemu\vmo...

HGMrWang
30分钟前
7
0
设计要做到扩展性强还挺难的

概述 在日常开发中,有时候你的上司会跟你说,这个模块的设计扩展性要高。把这句话说出来很简单,但是要做到则非常难。导致难的其中一个因素是: 你不熟悉这个行业的业务的玩法 我举个例子来...

Sam哥哥聊技术
31分钟前
2
0
聊聊 scala 的模式匹配

一. scala 模式匹配(pattern matching) pattern matching 可以说是 scala 中十分强大的一个语言特性,当然这不是 scala 独有的,但这不妨碍它成为 scala 的语言的一大利器。 scala 的 patt...

终日而思一
33分钟前
1
0
Spring事物手动回滚

手动回滚: 方法1:在service层方法的catch语句中增加:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();语句,手动回滚,这样上层就无需去处理异常(现在项目的做法)...

寒风中的独狼
37分钟前
1
0
直角三角形的三角函数

sinA = a/c;A = asin(a/c); 特殊角度的三角函数值

一个小妞
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部