Vue-router编程式导航的两种实现代码

页面导航的两种方式

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

编程式导航基本用法

常用的编程式导航 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');
   }
   }
  }
     

具体吗实现：

!DOCTYPE htML>
    html lang="en">
     head>
     meta charset="UTF-8" />
     meta name="viewport" content="width=device-width, inITial-scale=1.0" />
     meta http-equiv="X-UA-Compatible" content="ie=Edge" />
     title>
    Document/title>
     !-- 导入 vue 文件 -->
     !-- script src="./lib/vue_2.5.22.js">
    /script>
     -->
     script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    /script>
     !-- script src="./lib/vue-router_3.0.2.js">
    /script>
     -->
     script src="https://unpkg.COM/vue-router/dist/vue-router.js">
    /script>
     /head>
     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>
    /html>
    

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' }
}
    ) 

到此这篇关于Vue-router编程式导航的实现代码的文章就介绍到这了,更多相关Vue router编程式导航内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue router传递参数并解决刷新页面参数丢失问题
• Vue-router路由该如何使用
• vue-router路由懒加载及实现的3种方式
• vue-router懒加载的3种方式汇总
• Vue-router中hash模式与history模式的区别详解
• vue-router定义元信息meta操作
• Vue router安装及使用方法解析
• vue3.0+vue-router+element-plus初实践
• 如何处理vue router 路由传参刷新页面参数丢失

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！