先配置一级路由

import Vue from 'vue'
import VueRouter from 'vue-router' ;
import Layout from '@/views/Layout'
import ArticleDetail from '@views/ArticleDetail'
Vue.use(VueRouter)

const router =new VueRouter({
    routes:[
        {
            path:'/',
            component:Layout
        },
        {
            path:'detail',
            component:ArticleDetail
        }
    ]
})

export default router

import Vue from 'vue'
import VueRouter from 'vue-router' ;
import Layout from '@/views/Layout'
import ArticleDetail from '@views/ArticleDetail'
Vue.use(VueRouter)

const router =new VueRouter({
    routes:[
        {
            path:'/',
            component:Layout,
            //通过children配置项，可以配置嵌套子路由
            // 1.在childern配置项中，配置二级
            //2.准备二级路由出口
            children:[
                {
                    path:'/article',
                    component:Article 
                },
                {
                    path:'/collect',
                    component:Collect
                }
            ]
        },
        {
            path:'detail',
            component:ArticleDetail
        }
    ]
})

export default router

所以路由出口也需要在Layout也需要路由出口<router-view></router-view>

动态渲染首页 1.安装axios

yarn add axios

2.接口文档说明

请求地址：https........
请求方式：get

3.data中提供数据，created中发送请求，获取数据

跳转详情页传参 1.查询参数传参？参数=参数值 => this.$route.query

2.动态路由传参 改造路由=> /路径/参数 =>this.$routs.params.参数名

动态渲染详细页 接口文档说明

请求地址：https........
请求方式：get

发送请求获取数据

import axios from 'axios'
export default {
  name:'article-detail-page',
  data(){
    return{
    article:{}
  };
  },
  async created(){
    this.article={}
    const{data}=await axios.get(

    );
    this.article=data.result;

  }
 

组件缓存keep-alive

但存在问题，所有的页面都被缓存，而我们需要有些被缓存，有些不用被缓存

<template>
 <div class="h5-wrapper">
  <!-- 只希望Layout被缓存，include配置，：include=“组件名数组” -->
  <keep-alive :include="[Layout]">
    <router-view></router-view>
  </keep-alive>
 </div>
</template>

若以后需缓存的多，可以将其写在下面data中

export default {

  data(){
    return{
   //缓存组件名数组
   keepArr:['Layout']
  };

被缓存的组件会多两个生命周期钩子

• active激活时，组件被触发
• deactived失活时，离开页面看不见时触发

另外，一旦被缓存后before created created 还有mounted

项目关于路由的使用