031_vue编程式导航

最新推荐文章于 2025-04-10 17:04:31 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-10 17:04:31 发布

阅读量293

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122900561

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 页面导航的两种方式

1.1. 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航。例如: 普通网页中的<a></a>链接或vue中的<router-link></router-link>。

1.2. 编程式导航: 通过调用JavaScript形式的API实现导航的方式, 叫做编程式导航。例如: 普通网页中的location.href。

1.3. vue中的编程式导航

1.3.1. this.$router.push('hash地址');

1.3.2. this.$router.go(n);

1.4. router.push()方法的参数规则

// 路径名称
router.push('/user');
// 对象路径
router.push({path: '/user'});
// 命名路由传递参数
router.push({name: '/user_alias', params: {id: 1}});
// 带查询参数, 变成/user?uname=lisi
router.push({path: '/user', query: {uname: 'lisi'}});

1.5. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>编程式导航</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user/1">User1</router-link>
	      	<router-link to="/user/2">User2</router-link>
	      	<router-link :to="{ name: 'user_alias', params: {id: 3} }">User3</router-link>
	      	<router-link to="/register">Register</router-link>

      		<!-- 路由占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			const user = {
				props: ['id', 'uname', 'age'],
	        	template: `
	        		<div>
	        			<h1>User组件 -- 用户id为: {{id}} -- 姓名为: {{uname}} -- 年龄为: {{age}}</h1>
	        			<button @click="goRegister">跳转到注册页面</button>
	        		</div>
	        	`,
        		methods: {
          			goRegister() {
            			this.$router.push('/register');
          			}
        		},
	      	};

	      	const register = {
	        	template: `
	        		<div>
	        			<h1>Register组件</h1>
	        			<button @click="goBack">后退</button>
	        		</div>
	        	`,
        		methods: {
          			goBack() {
            			this.$router.go(-1);
          			}
        		},
	      	};

	      	// 创建路由实例对象
      		const router = new VueRouter({
        		routes: [
        			{ path: '/', redirect: '/user/3' },
          			{ 
          				// 命名路由
            			name: 'user_alias',
          				path: '/user/:id', 
          				component: user, 
          				props: route => ({ uname: 'zs', age: 20, id: route.params.id }) 
          			},
          			{ path: '/register', component: register }
        		]
     		});

			var vm = new Vue({
				el: "#app",
        		router: router
			});
		</script>
	</body>
</html>

1.6. 效果图