Vue中路由管理器Vue Router使用方式（一）

1、在模块编程中安装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')

2、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框架整理