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