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  一纸年华  阅读(16)  评论(0)  编辑  收藏  举报  来源