vue-router 路由

组件化之后才能路由化

（一定要先安装路由）

单页面路由封装
router.js

import Vue from 'vue'
import Router from 'vue-router'

import home from './views/home.vue'
import index from './views/index.vue'
Vue.use(Router)

export default new Router({
 routes:[{
   path:'/',
   name:'home',
   component:home,
   redirect:'/index',
   children:[
     {
       path:'/index',
       name:'index',
       component:index,
     }
   ]
 }]
})

mian.js中引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue和其他组件中用<router-view></router-view>控制显示

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
</style>

home.vue——router-view中显示router中的children路由

<template>
  <div>
    <NavHeader></NavHeader>
    <router-view></router-view>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import NavHeader from '../components/NavHeader'
import NavFooter from '../components/NavFooter'
export default {
  name:'home',
  components:{
    NavHeader,
    NavFooter
  },
}
</script>
<style lang="stylus" scoped>

</style>

获取页面路由参数：this.$route.params.id
路由传参三种方式
1

this.$router.push(`/detail/${id}`)
//获取参数
this.$route.params.id

2 query

this.$router.push({
  path:'/detail',
  query:{
  id:id
  }
})
//获取参数
this.$route.query.id

2 params

this.$router.push({
  name:'detail',
  params:{
  id:id
  }
})
//获取参数
this.$route.params.id

路由懒加载/路由按需加载：
1.resolve，require

{
         path:'/detail/:id',
          name:"detail",
          component:resolve=>require(['./pages/detail.vue'],resolve)
 }

2.import
要npm i @babel/plugin-syntax-dynamic-import --save 来支持import

 {
          path:'/product/:id',
          name:"product",
          component:()=>import('./pages/product.vue')
        },

ps：更好的优化还需在vue.config.js中加上

  chainWebpack:config=>{
    config.plugins.delete('prefetch')
  }