一、在模塊編程中安裝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')
更多 :