vue 路由总结，创建和使用和缓存，嵌套

1，创建路由组件，一般新建views或pages模块这样来命名

2，创建router配制组件，

      { 1，引入vue，引入vue-router   import Vue from 'vue'    import VueRouter from 'vue-router' 

        2，使用路由 Vue.use(VueRouter) 

        3，引入views下的路由组件

            import Home from '../views/Home.vue'  //一般引入

           const About = ()=> import('../views/About.vue')  //懒加载引入

        4，配制路由

           

const routes = [  {

    path: '/',

    name: 'home',

    component: Home,

    children:[  //嵌套路由

      {

        path: '/home/news', //path左侧的斜杠永远代表根路径

           

        component: News

      },

      {

        path: '/home/message',//简化写法,可以不用写全路径，只写message

           

        component: Message

      }

    ]

  },

]

   

//创建路由

const router = new VueRouter({    

  mode: 'history', //使用html5的history api

  base: '/',  //根路径

  routes

})

//对外暴露touter对象

export default router

3，在main.js中引入 touter对象

import router from './router'

4，挂载touter

new Vue({

  router,     //（完整的写法：router：router）

  store,

  render: h => h(App)

}).$mount('#app')

 

5，在其它组件中的使用

<div id="nav">

      <router-link to="/">Home</router-link> | //router链接相当于<a href=""></a>

      <router-link to="/about">About</router-link>

    </div>

    <keep-alive>

<router-view/>  //显示router组件

</keep-alive> //  加上它就会启用router缓存