Vue Router 学习 router-view基础 以及 routes配置

<!-- 
  router-view 是 vue-router 库的指定刷新区域，调用 vue-router 中定义的路径只会在 router-view 身上进行刷新，其他区域不会变动。
  所以也就可以根据需求不同去做成全屏刷新还是局部区域刷新。
-->
<!-- 使用组件 -->
<!-- <todo></todo> -->
<!-- router-view 展示 vue-router 路由内容 -->
<!-- <router-view /> -->
<!-- router-view 过渡动画 -->
<transition name="fade">
  <router-view />
</transition>
<!-- router-link 跳转 -->
<!-- 路径跳转 -->
<router-link to="/todo">跳转Todo</router-link><br />
<router-link to="/login">跳转Login</router-link><br />
<!-- 名称跳转 -->
<router-link :to="{name: 'todo'}">跳转Todo Name</router-link><br />
<!-- 路径添加 exact 解释：https://www.jianshu.com/p/860c77649ba9 -->
<router-link to="/login/exact">跳转Login Exact</router-link>
<!-- router-view 嵌套使用  -->
<!-- <div style="background-color: green; width: 500px; height: 500px;">
  <div style="background-color: red; width: 100px; height: 100px;">
    <router-view style="overflow: hidden;" />
  </div>
</div> -->

// 重定向路径(相当于调用 '/' 主路径 会自动调用到重定向路径)
redirect: '/login'

// 指定组件
component: Todo,
// 名称(名字可以随便起)
// 可以不通过路径跳转，通过名称去进行跳转
name: 'todo',
// 页面数据信息
meta: { 
  title: '这是 Todo 页面',
  description: '这是 Todo 页面描述'
},
// 当前路径下的子路径，子路径的使用方法是这样的：
// 既然子路径是在 /todo 这个路径下的 Todo 组件里面添加的，那么也就只能在这个组件里面添加一个 <router-view />
// 在 Todo 这个组件里面添加了 <router-view /> 之后，在去访问 http://localhost:8080/todo/test 的时候
// Todo 里面的 <router-view /> 这个位置就会刷新展示 Login 组件
children: [
  {
    path: 'test',
    component: Login
  }
]

// 指定组件
component: Todo,
// props 设置为 true
// 则在组件 Todo 中直接使用 props: ['id']， 则可以直接接收路径中传入的参数 id，就不需要通过 this.$route 这种方式去获取传参了
props: true,
// props 也可以自己自定义传入的参数
// props: {
//   id: '123'
// },
// props 也可以通过根据传入的 query 进行传递也可以写成这样
// 例如链接： http://localhost:8080/todo/123?a=dzm&b=xyq
// props: (route) => ({
//   id: route.query.a // dzm
// }),
// 页面数据信息
meta: { 
  title: '这是 Todo 页面',
  description: '这是 Todo 页面描述'
}

// 指定组件
component: Login