VUE路由router（模板公用）

一、定义作用
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）单页面实现了页面的切换，但是不刷新页面，它是通过js实现的
二、实战demo
（1）在用cmd创建项目，在创建项目的时候创建router,打一个yes
（2）在cmd创建好项目；components文件夹下创建apple.vue和banana.vue两个组件 ；main.js和App.vue不用动；
（3）在src/router文件夹下的index.js文件编辑如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'//导入组件
import apple from '@/components/apple'  
import banana from '@/components/banana' 
Vue.use(Router)
export default new Router({  
routes: [    
{      
path: '/',      
name: 'HelloWorld',      
component: HelloWorld    
},
{
   path: '/appNews/:typeid', //URL尾部的路径
   name: 'appNews',
   component: appNews //组件名
},
{
   path: '/djgz/:typeid', //URL尾部的路径
   name: 'djgz',
   component: djgz //组件名
 },
 {    	
path: '/apple',   //URL尾部的路径      
name: 'apple',      
component: apple    //组件名    
},    
{    
path: '/banana',     
 name: 'HelloWorld',      
 component: banana    
 }  
 ]})

（4）在vue文件中引用

<template>  
  <div id="app">    
    <img src="./assets/logo.png">    
    //<!-- 路由部分 -->
    <template>
        <keep-alive><router-view /></keep-alive> //这个是显示默认的第一个路由的路径
    </template>   
    <router-link :to="{path:'/apple'}">to apple</router-link>    
    <router-link :to="{path:'/banana'}">to banana</router-link>  
  </div>
</template>

三、项目中的公用模板（网站中整个项目公用头部尾部，中间部分随着路由变化）
（1）首先在components中建一个layout.vue页面，写好头部尾部，并且在中间写上路由

   <div>
   这里是公用导航栏
   <a class="menu-link"><router-link :to="{ path: '/appNews/38' }">新闻动态</router-link></a>
   <a class="menu-link"><router-link :to="{ path: '/djgz/41' }">党团建设</router-link></a>
   </div>
   <template>
        <keep-alive><router-view /></keep-alive> //这个是显示默认的第一个路由的路径
    </template>   
   <div>这里是公用尾部信息</div>

（2）公用主页layout.vue要写在main.js文件中

import Vue from 'vue'
import layout from './components/layout'
import router from './router'
import http from 'axios'
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
Vue.prototype.$https = http
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { layout },
  template: '<layout/>'
})

（3）这样就可以实现在点击导航栏时，中间的路由就会变，实现页面的切换