0608案例：vue一级路由跳转二级路由

一级视图：App.vue

一级路由：router > index.js

现在的需求是Login视图里面有2个跳转，一个跳转到AccountView，另一个跳转到CodeView!

说形象点，就是登录界面有2个按钮可以随时切换手机登录或者账号密码登录

首先，我们在LoginView内部设置，一级视图设置跳转

对应的AccountView和CodeView也要建好文件夹写好

然后，，在一级路由里面配置2级路由

这里存在一个问题，如果只访问/login，页面无内容，可以重定向解决！

path的两种写法都行，不用讲这么久

路由配置的meta用法

可以在meta中自定义键值对，后续用$route.meta.键名来使用。

meta: { title: "我的", isFlag: true, },

利用这两个键值对，我们可以实现头部显示不同标题，并且在左上角设置一个返回按钮，注意主页是没有返回按钮的。

具体实现就是，通用的AppHeader修改一下

<template>
    <div class="header">
        <div>
            <span v-if="$route.meta.isFlag" class="back" @click="$router.back()">&lt;</span>
        </div>
        <div>{{ $route.meta.title }}</div>
        <div class="right"></div>
    </div>
   
</template>

最后，关于第一个VUE项目，还有一些小问题需要注意。

<router-link exact-active-class="exact-active-aaa" active-class="active-aaa" exact to="/">首页</router-link>

如果你用exact-active-class/active-class来修改精准匹配的class名或包含匹配class名。那么此时这个class就仅对当前页面生效，因为其他页面的默认名字你还没改

另外，当你在登录界面中切换手机登录或者账密登录，需要保证咱们携带的参数源头url不被改变，所以每次路由跳转的时候都需要携带参数

参数传递的方法是query，那么拿的方法也是query