二级路由书写不显示初始页面

当我们需要用到二级路由时，会先想到去看文档。文档看不懂怎么办？还是看看别人的文章。

创建二级路由

1. 首先创建二级路由页面，有几个创建几个。

2. 其次需要在router里面配置二级路由

{
        path:'/sort',
        name:'sort',
        component:()=>import('../views/Sort.vue'),
        //子路由
        children:[
            {
                path:'photoGraphy',
                component:()=>import( '../components/Content/PhotoGraphy.vue')
            },
            {
                path:'switc',
                component:()=>import('../components/Content/Switc.vue'),
            },
            {
                path:'light',
                component:()=>import('../components/Content/Light.vue'),
            }
        ]
    },

2. 在父页面里面放置： 标签router-link 和 router-view

3. 在router-link里面写上:

:to="/sort/PhotoGraphy"

//使用了v-for可以这么写，这也是你拼接其他属性的用法
:to="'/sort/'+ item.id " 

//编程式的导航，不需要router-link标签
this.$router.push('/parent/child');

初始页面点击才渲染

这时候就需要

1. 路由重定向（推荐）

redirect: '/sort/PhotoGraphy', // 当访问 /sort 时自动重定向到 /sort/PhotoGraphy

2. 默认子路由

给子路由：path: '', // 空路径作为默认子路由。

但是不推荐，我使用发现他确实会立即渲染，但是点回去页面就失效。