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

App.vue:

<template>
  <div id="app">

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

  </div>
</template>

<script>
import Todo from './views/todo.vue'
export default {
  name: 'app',
  components: {
    Todo
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

####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:

<template>
  <div>
    <!-- Todo 页面内容 -->
    <div>这里是TodoTodoTodoTodoTodoTodo</div>
    <!-- 显示 Todo 页面子路径的 <router-view /> -->
    <router-view />
  </div>
</template>

<script>
export default {
  props: ['id'],
  mounted () {
    console.log(this.id) // 123
    console.log(this.$route) 
    // 例如链接： http://localhost:8080/todo/123?a=dzm&b=xyq
    /* 输出:
      fullPath: "/todo/123?a=dzm&b=xyq"
      hash: ""
      matched: [{…}]
      meta: {title: "这是 Todo 页面", description: "这是 Todo 页面描述"}
      name: undefined
      params: {id: "123"}
      path: "/todo/123"
      query: {a: "dzm", b: "xyq"}
    */
  }
}
</script>

<style>

</style>