Vue 编程式导航

超、凢脫俗 2022-12-22 15:29 181阅读 0赞

所谓编程式导航指的是不通过router-link跳转，而是借助 router 的实例，通过代码的方式跳转。

## 示例： ##

*  App.vue

<template>
      <div id="app">
        <button @click="toHome">Home</button>
        <button @click="toNews">News</button>
        <button @click="toDetails">Details</button>
        <br>
        <router-view></router-view>
      </div>
    </template>
    <script> export default { methods: { toHome () { this.$router.push('/home') }, toNews () { this.$router.push({ path: '/news', query: { name: 'zhangsan' } //query方式传参 }) }, toDetails () { this.$router.push({ name: 'Details', params: { nid: 1001 } //params方式传参 }) } } } </script>

*  Home.vue

*  News.vue

<template>
      <div>
        <h2>News</h2>
        {
       {this.$route.query}}  <!—获取query传递过来的数据 -->
      </div>
    </template>

*  Details.vue

<template>
      <div>
        <h2>Details</h2>
        {
       {this.$route.params.nid}}   <!—获取params传递过来的数据 -->
      </div>
    </template>

*  router目录下的index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 将Vue挂载到Router中，接下来就可以使用Router了
    Vue.use(VueRouter)
    
    const routes = [{ 
      path: '/home',
      component: () => import('../views/Home')
    }, { 
      path: '/news',
      component: () => import('../views/News') // 懒加载
    }, { 
      path: '/details/:nid',
      name: 'Details',
      component: () => import('../views/Details') // 懒加载
    }
    ]
    
    const router = new VueRouter({ 
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

*  效果：  
    默认页面  
    ![在这里插入图片描述][20201120194414870.png_pic_center]

单击Home：  
![在这里插入图片描述][20201120194420766.png_pic_center]

单击News：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]

单击Details：  
![在这里插入图片描述][2020112019443311.png_pic_center]

[20201120194414870.png_pic_center]: /images/20221120/0412e178f9604b2fbfe6487d80c68d66.png
[20201120194420766.png_pic_center]: /images/20221120/d345a878a5b64ab5b10ab8bdd91889b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5eb793de1c05429d9a9fc6cb7c5e160a.png
[2020112019443311.png_pic_center]: /images/20221120/b7ad5b55e7fa4fe1a5b6032f4863d509.png