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: '',
   	router: router,
   	components: {
   		App
   	}
   })
   

4. 父页面设置视图加载区域
   添加此标签：< 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: '',
   	router: Routers,
   	components: {
   		Main
   	}
   })
   

三、路由跳转

1.