进一步有进一步惊喜

export default {
name: 'Page2',
data (){
    return {
      number: 1  
    }
},
methods: { // 方法属性
    back(e){ // 设置了按钮的点击监听事件
        // alert("你点击了我")
        this.number+=1;
        console.log(this.number);
    },
    clickbtn(){
        // alert("计算属性");
        this.number-=1;
    }
},

<template>
    <div id="Page1inner">
        这是Page1inner的内容,在这个页面中将使用饿了么组件并
        使用内嵌组件
        <el-button>按钮</el-button>
        <i class="el-icon-edit"></i>
        <mycomponent></mycomponent>
        <mycomponent2></mycomponent2>
    </div>
</template>

<script>
// 引入其他的组件
import mycomponent from './mycomponent.vue'
import mycomponent2 from './mycomponent2.vue'

export default {
components:{
     mycomponent,mycomponent2
 }
}
</script>
<style>
</style>

{
    test:/\.less$/, // 配置less样式
    loader:"style-loader!css-loader!less-loader"
}

watch: {
  $route: {
    handler: function(route) {
      this.redirect = route.query && route.query.redirect
      this.examId = route.query.examId
    },
    immediate: true
  }
},

{
name: 'Home',
paht: '/Home',
componnent: Home,
childern: [ // Home 组件中嵌套tab的组件
  { // 空白子路由
    path: '',
    component: XX
  },
  {
    path:'Tab',  // 路由路径为/Home/tab
    component: Tab
  }
]
}

{
  path: '/A', // 到A的路由
  component: A, // A的组件
  children: [
    {
      path: '/B', // 到B的路由,是A的嵌套路由
      component: B, // 组件B
      children: [
        {
          path: '/C', // 到C的路由,是B的嵌套，同时是A的嵌套的嵌套
          component: C // 组件C
        }
      ]
    }
  ]
}

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

{
  path: '/pathurl',
  components: {
    default: Component1, // 默认的视图
    a: Component2,  // 命名为a的加载的组件为Componnent2
    b: Component3  // 命名为b的router-viwe加载组件为Component3
  }
}

{
      name: 'World',
      path: '/World',
      component: World,
      children:[
        {
          path: '',
          components:
          {
            A: A,
            B: B
          },
          children: [
            {
              path: '/C', // 配置C的路由
              components:{
               Aview: C   // C组件渲染到A中name为Aview的router-view中
              } 
            },
            {
              path: '/D',
              components: {
                Aview: D //
              } 
            }
          ]
        },
       
      ]
    }

<template>
    <div id="D">
        这是D中的内容
        <p>测试内嵌路由</p>
        <router-link to="test">测试</router-link>
        <router-link to="test2">测试2</router-link>
        <router-view/>
    </div>
</template>
<script>
import Vue from 'vue'
import Router from 'vue-router'
import Test from './test.vue'
import Test2 from './test2.vue'
Vue.use(Router)
var router = new Router({
    routes:[
        {
            path:'/test',
            component:Test
        },
        {
            path:'/test2',
            component:Test2
        }
    ]
})
export default {
    router
}
</script>
<style>
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/test'
import Test2 from '@/components/test2'
Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/test',
            component:Test
        },
        {
            path:'/test2',
            component:Test2
        }
    ]
})

<template>
    <div id="D">
        这是D中的内容
        <p>测试内嵌路由</p>
        <router-link to="test">测试</router-link>
        <router-link to="test2">测试2</router-link>
        <router-view/>
    </div>
</template>
<script>
//import Vue from 'vue'
//import Router from 'vue-router'
//import Test from './test.vue'
//import Test2 from './test2.vue'
//Vue.use(Router)
// var router = new Router({
//     routes:[
//         {
//             path:'/test',
//             component:Test
//         },
//         {
//             path:'/test2',
//             component:Test2
//         }
//     ]
// })
// 引用D文件夹中的路由文件
import router from '@/D/D'
export default {
    router
}
</script>
<style>
</style>

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

const service = axios.create({
  baseURL: baseURL, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// 设置统一session
service.defaults.withCredentials = true

export function downloadFile(id) {
  let service = axios.create({
    baseURL: "http://127.0.0.1:8080",
    timeout: 5000, // request timeout
    responseType:'blob'
  })
  service.interceptors.request.use(
    config => {
      config.headers['Authorization'] = getToken()
      return config
    },
    error => {
      // do something with request error
      console.log(error) // for debug
      return Promise.reject(error)
    }
  )

  let downloadReq = service({
    url: "/Api/File/DownloadFile",
    method: "post",
    data: {id: id}
  })
  
  downloadReq.then(rsp => {
    console.log(">>> Download File")
    console.log(rsp)
    console.log("<<<")
    const filenameUTF8 = rsp['headers']['content-disposition'].split('filename')[1].split("=")[1]
    const url = window.URL.createObjectURL(new Blob([rsp.data]))
    const link = document.createElement('a')
    link.href = url
    let filename = decodeURI(filenameUTF8);
    link.download = filename
    document.body.appendChild(link)
    var evt = document.createEvent('MouseEvents')
    evt.initEvent('click', false, false)
    link.dispatchEvent(evt)
    document.body.removeChild(link)
  }).catch(err => {
    console.log(err)
    return false
  })
  return true
}