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