VUE路由使用

一、路由配置及加載

1. 安裝
   npm install --save vue-router
2. 引用
   import VueRouter from ‘vue-router’;
   Vue.use(VueRouter);
3. 配置路由文件

   組件配置方式A：
   import HelloWorld from './components/HelloWorld';
   var router = new VueRouter({
   	routes:[{
   		  path: '/hello',,
   		  component:HelloWorld
   	}]
   })
   組件配置方式B：
   var router = new VueRouter({
   	routes:[{
   		  path: '/hello',
   		  component: (resolve) => require(['./components/HelloWorld.vue'], resolve)
   	}]
   })
   
   new Vue({
   	el: '#app',
       template: '<App/>',
   	router: router,
   	components: {
   		App
   	}
   })
   

4. 父頁面設置視圖加載區域
   添加此標籤：< router-view></ router-view>

二、封裝router.js

1. 將路由配置放入router.js文件

   //引入相關基礎
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   Vue.use(VueRouter);
   
   //配置路由地址及模式
   const routers = [
       {
           path: '/hello',
           meta: {
               title: ''
           },
           component: (resolve) => require(['./components/HelloWorld.vue'], resolve)
       }
   ];
   var RouterConfig = {
       mode: 'history', //history模式下去除#號,hash模式下有#號。默認爲hash模式
       routes: routers
   };
   var router = new VueRouter(RouterConfig);
   
   //導出供外部訪問
   export default router;
   

2. 在main.js中引用

   import Routers from './router.js';
   new Vue({
   	//1.初始化頁面
   	el: '#app',
       template: '<App/>',
   	router: Routers,
   	components: {
   		Main
   	}
   })
   

三、路由跳轉

1.