Vue动态路由的使用 路由懒加载 路由嵌套 keep-alive

1.动态拼接地址

//router文件夹下的  index.js
import  home  from '../components/Home'   //(引入)
import  user  from '../components/user ' 
Vue.ues(VueRouter)
const routes=[
//配置
{
  path:'',
  redirect:'/home'//redirect 重定向  路由默认地址
},
{
  path:'/home',
  component:home  //上面引入的那个名字
}，
{
 path:'/user/:userId',
  component:home
}
]
const  router = new VueRouter({
   routes
   )


// 在app.vue写
   <router-link  :to="'/user/'+userid">我的</router-link>  
   //用v-bind 把值动态绑定上
   <router-view></router-view>//点击后的home页面显示在哪
<script>
      export default{
           name:'App',
           data(){
              return{
                userId:'list'
              }
         }
}

</script>

2.拿到上面拼的值

<template>
   <div>
      {{userId}}   //拿到上面拼接的值
      {{$route.params.userId}}  //可以直接用
   <div>
</template>

<script>
   export default{
       name:'User',
       computed:{
                usrId(){
                       return  this.$route.params.userId   //取到值   后面userId是路由页配置冒号后面的值
                       //$route是处于活跃状态  拿的就是谁
                }
        }
}
</script>

3.路由的懒加载
路由看加载的主要作用就是将路由对应的组件打包成一个个的JS代码块，只有在这个路由被访问到的时候，才加载对应的组件。

//es6写法 
const routes=[
     {
          path:'/home',
          component:() => import('../components/Home')
           //在文件上方就不用引人入了
      }
}
//或者
const home = () => import('../components/Home')
const routes=[
     {
          path:'/home',
          component:home 
      }
}

4.路由的嵌套
一个路径映射一个组件，访问这两个路径也会分别渲染俩个组件

步骤：
1.创建对应的子组件，并且在路由映射中配置对应的子路由
2.在组件内部使用router-view标签

const home = () => import('../components/Home')
const routes=[
     {
          path:'/home',
          component:home,
          children:[
              {
                path:'',
                redirect: 'news'//默认
              },
              {
                path:'news',
                component:() => import('../components/news')
              },
               {
                path:'message',
                component:() => import('../components/message')
              }
          ]
      }
}
//在所属的父路由的页面下监听路由单击  router-link  或者this.$route.params都行   路径要写完整的(带上父路由的)
<router-link to="/home/news"></router-link>
<router-link to="/home/message"></router-link>
//在所属的父路由的页面下添加router-view标签显示内容 这里就在 Home.vue中插入router-view标签

5.keep-alive
使组件不会处于一频繁被创建和销毁的过程

//使该模块处于活跃状态
<keep-alive exclude="user,user">  //exclude是把后面的组件排除在外（要频繁创建 频繁摧毁） user是路由页配置的name
      <router-view></router-view>
</keep-alive>
<keep-alive include="user,user">  //include 与后面的 name匹配 才会被缓存
      <router-view></router-view>
</keep-alive>
//有了keep-alive   能够使用activated/deactivated函数