# app.js
var routes = [
{
path: '/users',
components: {
sidebar: {
template: `
<div>
<ul>
<li>用户管理</li>
<li>权限管理</li>
</ul>
</div>
`
},
content: {
template: `
<div>more more more more more </div>
`
}
}
},
{
path: '/post',
components: {
sidebar: {
template: `
<div>
<ul>
<li>帖子管理</li>
<li>消息管理</li>
</ul>
</div>
`
},
content: {
template: `
<div>more more more more more </div>
`
}
}
},
]
var router = new VueRouter({
routes: routes
})
# 01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<div>
<router-link to="/users">用户管理</router-link>
<router-link to="/post">帖子管理</router-link>
</div>
<div>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</div>
</div>
<script src="./vue.min.js"></script>
<script src="./vue-router.js"></script>
<script src="./app.js"></script>
</body>
</html>
# 当我们希望某个路由不被访问时
# app.js
var routes = [
{
path: '/',
component: {
template: `
<div><h3>首页</h3></div>
`
}
},
]
var router = new VueRouter({
routes: routes
})
// 三个参数：从哪个路由来，到那个路由去，next方法中可传入true或false表示是否可访问该路由，也可传入路由，表示将要跳转的路由
router.beforeEach(function(to, from, next){
var logged_in = false
if(!logged_in && to.path == '/post'){ // 未登录且访问post路由时跳转到首页
next('/');
}else{
next();
}
})
# 01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<div>
<router-link to="/user/王花花">王花花</router-link>
<router-link to="/post">帖子管理</router-link>
</div>
</div>
<script src="./vue.min.js"></script>
<script src="./vue-router.js"></script>
<script src="./app.js"></script>
</body>
</html>
# 路由设置为不能访问，该路由的子路由却显示
# 解决方案
# app.js
router.beforeEach(function(to, from, next){ // 当一个路由中有子路由时，设置未登录时，不能访问该路由及其子路由
var logged_in = false
if(!logged_in && to.matched.some(function(item){ // 遍历该路由和子路由
return item.path == '/post'; // 如果子路由中也有post，也跳转到首页
})){
next('/');
}else{
next();
}
})
