vue学习--前端路由(六、Vue Router编程式导航 )

vue-router编程式导航

1 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 <a></a> 链接或 vue 中的 <router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的 location.href

2 编程式导航基本用法

常用的编程式导航 API 如下：

this.$router.push('hash地址')
this.$router.go(n)

     const User = {   
      template: '<div><button @click="goRegister">跳转到注册页面</button></div>',       
      methods: { 
        goRegister: function(){           
        // 用编程的方式控制路由跳转          
        this.$router.push('/register'); 
        } 
     } 
   }

3 编程式导航参数规则

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

   // 字符串(路径名称)  
  router.push('/home')   
  // 对象   
  router.push({ path: '/home' })   
  // 命名的路由(传递参数)  
  router.push({ name: '/user', params: { userId: 123 }})   
  // 带查询参数，变成 /register?uname=lisi   
  router.push({ path: '/register', query: { uname: 'lisi' }})

  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>
 
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
 
    <script>
      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' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })
 
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

posted @ 2020-04-19 22:19 一纸年华阅读(18) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

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

相关博文：

· vue学习--前端路由(五、Vue Router命名路由 )

· vue学习--前端路由(二、Vue Router基本使用)

· Vue编程式导航

· 25_命名路由和编程式导航

· 命名路由以及编程式导航

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

历史上的今天：
2018-04-19 反射：获取Class对象的三种方式

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--前端路由(六、Vue Router编程式导航 )

vue-router编程式导航

1 页面导航的两种方式

2 编程式导航基本用法

3 编程式导航参数规则

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

目录导航

	const User = {
	template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
	methods: {
	goRegister: function(){
	// 用编程的方式控制路由跳转
	this.$router.push('/register');
	}
	}
	}

	// 字符串(路径名称)
	router.push('/home')
	// 对象
	router.push({ path: '/home' })
	// 命名的路由(传递参数)
	router.push({ name: '/user', params: { userId: 123 }})
	// 带查询参数，变成 /register?uname=lisi
	router.push({ path: '/register', query: { uname: 'lisi' }})

	<body>
	<!-- 被 vm 实例所控制的区域 -->
	<div id="app">
	<router-link to="/user/1">User1</router-link>
	<router-link to="/user/2">User2</router-link>
	<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
	<router-link to="/register">Register</router-link>

	<!-- 路由占位符 -->
	<router-view></router-view>
	</div>

	<script>
	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' },
	{
	// 命名路由
	name: 'user',
	path: '/user/:id',
	component: User,
	props: route => ({ uname: 'zs', age: 20, id: route.params.id })
	},
	{ path: '/register', component: Register }
	]
	})

	// 创建 vm 实例对象
	const vm = new Vue({
	// 指定控制的区域
	el: '#app',
	data: {},
	// 挂载路由实例对象
	// router: router
	router
	})
	</script>
	</body>