java中路由的使用方法_Vue中路由管理器Vue Router使用介绍（一）

一、在模块编程中安装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定义视图占位符

首页

测试页面

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')

更多 ：