Vue Router 编程式导航

一、编程式导航 - js方式跳转路由

在Vue中，页面有两种导航方式，分别是声明式导航和编程式导航。其中，使用<router-link>标签定义导航链接的方式属于声明式导航。而编程式导航是先通过useRouter()函数获取全局路由实例，然后通过调用全局路由实例实现导航。

二、编程式导航语法

2.1 获取全局路由

Vue Router提供了useRouter()函数，使用它可以获取全局路由实例，该全局路由实例中提供了常用的push()方法、replace()方法和go()方法，获取全局路由实例的示例代码如下。

<script setup>

import { useRouter } from 'vue-router'

const router = useRouter()

</script>

2.2push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。

router.push({ name: '/user', params: { userId } })  // 跳转到/user/123

 三、编程式导航的代码演示

本文代码是在Vue Router 命名路由-CSDN博客的基础上进行修改的。

3.1回顾在router.js中使用name属性定义路由匹配规则

import { createRouter, createWebHashHistory } from "vue-router"
import Movie from "./components/Movie.vue"

// // 创建路由实例对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/movie/:id', name:'MovieName' , component: Movie, props: true },
    ]
})
// 导出路由实例对象
export default router

3.2回顾在Movie.vue中使用 $route.params.参数名 获取动态路径的参数

<template>
    <p>电影{{ $route.params.id }}页面</p>
</template> 

3.3在App.vue中使用编程式导航

<template>
  <div class="app-container">
    <h3>App根组件</h3>

    <!-- <router-link :to="{name:'MovieName', params:{id:1}}">电影1</router-link>
    <router-link :to="{name:'MovieName', params:{id:2}}">电影2</router-link>
    <router-link :to="{name:'MovieName', params:{id:3}}">电影3</router-link> -->

    <span @click="gotoMovie(1)">电影1</span>
    <span @click="gotoMovie(2)">电影2</span>
    <span @click="gotoMovie(3)">电影3</span>

    <hr>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoMovie = (Movie_id) => {
  router.push({
    name: 'MovieName',
    params: { id: Movie_id }
  })
}
</script>


<style scoped>
.app-container {
  text-align: center;
  font-size: 16px;
}

.app-container span {
  padding: 10px;
  color: #000;
}
</style>

3.4 浏览器可视化

在浏览器中访问http://localhost:5173/，页面显示App.vue程序入口文件；单击“电影2”链接，页面显示Movie组件，获取到的参数id值为2。

  

附本节项目代码下载地址：

链接：https://pan.baidu.com/s/1HZTQohQA0A1uL33n1oBzHA?pwd=8888 
提取码：8888