方式1：
redirect： '/header'
方式2：
redirect： { name： 'header' }
方式3：
redirect： to => {
// console.log(to)
return {
name： 'about'
}
}10-重定向.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1. 入口 -->
<!-- <router-link to="/one">one</router-link> -->
<!-- 4. 出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const One = {
template: `<div>one组件</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [
// 方式1 : path路径
{
path: '/',
redirect: '/one'
},
// 方式2 : 路由的名称
{
path: '/',
redirect: {
name: 'one'
}
},
// 方式3 : 函数
{
path: '/',
redirect: to => {
// console.log(to) // 路由对象去判断
// if (to.XXX) {
// return { name : 'one'}
// } else {
// return {name : 'two' }
// }
return {
name: 'one'
}
}
}, {
path: '/one',
name: 'one',
component: One
}
]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>