vue router入门(三)

案例1：命名视图

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

案例2：导航钩子

 # 当我们希望某个路由不被访问时
 
# 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>

案例3：路由匹配

 # 路由设置为不能访问，该路由的子路由却显示
 
# 解决方案
# 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();
    }   
})

posted @ 2022-09-08 14:10 DogLeftover 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue router入门(二)

· vue router入门(一)

· Vue router 路由

· vue3 router实践

· Vue3 路由 Vue router

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

vue router入门(三)

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	# 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();
	}
	})