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

App.vue:

```

<!-- 
  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> -->

```

routes.js:

``` import Todo from '../views/todo.vue' import Login from '../views/login.vue'

export default [ { // 主路径 path: '/',

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

}, { // 路径 path: '/todo',

// 指定组件
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
  }
]

}, { // 路径传参 path: '/todo/:id',

// 指定组件
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 页面描述'
}

}, { path: '/login', component: Login, name: 'login' }, { // 路径添加 exact 解释：https://www.jianshu.com/p/860c77649ba9 path: '/login/exact',

// 指定组件
component: Login

} ] ```

todo.vue:

```

这里是TodoTodoTodoTodoTodoTodo

```