Vue-router快速入门 是什么 如何跳转 如何传值的问题

于 2023-10-18 09:22:29 发布
阅读量88 收藏
点赞数
分类专栏： Vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sky_MaoXiaoqi/article/details/133893386
版权
本文介绍了Vue.js官方路由Vue-router在Vue3中的应用，包括静态路由的安装与配置、动态路由的实现以及如何通过路径、查询参数和命名参数进行页面跳转和数据传递。
摘要由CSDN通过智能技术生成

3.1 Vue-router是什么

Vue-router:Vue.js 的官方路由为 Vue.js 提供富有表现力、可配置的、方便的路由

官网：https://router.vuejs.org/zh/

作用：

1.实现vue页面(组件)的跳转

2.可以在跳转的时候携带参数

3.2 Vue3使用Vue-router(静态路由)

在这里插入图片描述

基于Vue-router实现页面跳转

静态路由步骤：
1.安装vue-router
2.实现一个vue3的页面编写
3.在src创建文件router，创建路由的js文件 index.js
4.在main.js中实现路由的配置
5.在app.vue主页 使用路由

静态路由具体步骤：
1.安装vue-router
npm install vue-router@4
2.实现一个vue3的页面编写
views-study.vue

<!-- 标签 画中画 -->
<template>
  <div>
    <h1>学习vue3</h1>
    <div>
      <h1>内容：{{ str1 }}</h1>
      <button style="font-size: 30px;color: red" @click="show">查看内容</button>
    </div>
  </div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";

//定义变量
const str1=ref("醒醒...")
const show = () => {
  alert(str1.value)
}
</script>

<style scoped>

</style>

3.在src创建路由的js文件
router-index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

4.在main.js中实现路由的配置
man.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入路由
import { createRouter } from "./router/index.js"
//配置路由
createApp(App).use(createRouter()).mount('#app')

5.在app.vue主页 使用路由

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

3.3 Vue-router实现跳转的方式

vue-router实现页面跳转有2种方式：

必须在页面使用：router-view(一般写在app.vue页面)

第一种：声明式路由（静态路由）

直接在template里面使用router-link标签 通过 to属性实现页面跳转

  <div>
<!--    静态路由 to 对应路径-->
    <router-link to="/study">静态路由</router-link>
  </div>

第二种：编程式路由（动态路由）

实现步骤

  1. views-learn.vue
  2. router-index.js
  3. App.vue

实现具体步骤

  1. views包-learn.vue
<template>
<div>
  <h1>动态路由</h1>
  <button @click="tz">点击跳转</button>
</div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";
import { useRouter } from 'vue-router'
// 声明变量
const router=useRouter()
const tz = () => {
  //基于路由 实现页面跳转 动态路由
  router.push("/study");
}
</script>

<style scoped>

</style>
  1. router包-index.js
import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study },
    { path: '/learn', component: learn }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}
  1. App.vue
<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
    <router-link to="/learn">演示动态路由</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

3.4 Vue-router实现传值

Vue-router在跳转页面的时候，也可以携带数据过去

有2种方式：
第一种：path(路径)+query(查询参数)
传递：router.push({ path: ‘/study’, query: { q1: msg1.value } })

第二种：name(名称)+params(参数)

具体实现:
第一种：path(路径)+query(查询参数)
步骤：
1.views/query.vue
2.router/index.js
3.App.vue
4.views/study.vue 获取

具体步骤：
1.views/query.vue

<template>
<div>
  <h1>通过路径和查询参数进行传递</h1>
  <input v-model="msg1">
  <button @click="tz1">跳转参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
//带r的是用来跳转的
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  //path:'/study' 上哪个里面跳, q1 参数名
  router.push({ path:'/study',query: { q1: msg1.value } });
}
</script>

<style scoped>

</style>

2.router/index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";


const routes = [
    // 2.注册 设置对应vue组件的路径名
    { path: '/study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

在这里插入图片描述

3.App.vue

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>
    <router-link to="/learn">演示动态路由</router-link>
    <router-link to="/query">路径传参</router-link>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

在这里插入图片描述

4.views/study.vue 获取

<!-- 标签 画中画 -->
<template>
  <div>
    <h1>学习vue3</h1>
    <div>
      <h1>内容：{{ str1 }}</h1>
      <button style="font-size: 30px;color: red" @click="show">查看内容</button>

      <h1>接收路由携带数据</h1>
      <h1>query:{{route.query.q1}}</h1>
    </div>
  </div>
</template>

<!-- Vue3的写法 setup -->
<script setup>
//导入
import {ref} from "vue";
//取值 用不带r的
import {useRoute} from "vue-router";

const route=useRoute();

//定义变量
const str1=ref("醒醒...")
const show = () => {
  alert(str1.value)
}
</script>

<style scoped>

</style>

在这里插入图片描述
study.vue 详细 见 静态路由篇
源码项目见：Vue3Study01_XQ/vue02

第二种：name(名称)+params(参数)

步骤：
1.views/params 传数据
2.router/index.js
3.App.vue
4.views/study.vue 按照名称接接收数据

具体实现
1.views/params 传数据

<template>
<div>
  <label>要传的数据:</label><input v-model="msg2">
  <button @click="tz2">跳转传值通过参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
// 传值用带r的useRouter
import {useRouter} from "vue-router";

const router=useRouter();

const msg2=ref("")

const tz2 = () => {
  router.push({ name: 'study', params: { p1:msg2.value } })
}
</script>

<style scoped>

</style>

2.router/index.js

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";
import params from "../views/params.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    //通过name+params传值的需要，需要再路径后面:参数名
    { path: '/study/:p1',name:'study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query },
    { path: '/params',name:'params', component: params }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

在这里插入图片描述
3.App.vue

<template>
  <div>
    <!-- 静态路由 to 对应路径 -->
    <router-link to="/study">静态路由</router-link>|
    <router-link to="/learn">演示动态路由</router-link>|
    <router-link to="/query">路径传参</router-link>|
    <router-link to="/params">名称传参</router-link>|
  </div>
  <div>
    <router-view/>
  </div>
</template>

<!--js代码 vue3的语法-->
<script setup>
</script>

<!-- css样式 美化 -->
<style scoped>

</style>

在这里插入图片描述

4.views/study.vue 按照名称接接收数据
在这里插入图片描述

路径传参和名称传参注意点：
加上名称传参之后需要在views/query.vue加上
在这里插入图片描述

<template>
<div>
  <h1>通过路径和查询参数进行传递</h1>
  <input v-model="msg1">
  <button @click="tz1">跳转参数</button>
</div>
</template>

<script setup>
import {ref} from "vue";
//带r的是用来跳转的
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  //path:'/study' 上哪个里面跳, q1 参数名
  router.push({ path:'/study/1',query: { q1: msg1.value } });
}
</script>

<style scoped>

</style>

还有index.js 注意
在这里插入图片描述

import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1.导入
// 2.注册 设置对应vue组件的路径名
import study from '../views/study.vue'
import learn from "../views/learn.vue"
import query from "../views/query.vue";
import params from "../views/params.vue"


const routes = [
    // 2.注册 设置对应vue组件的路径名
    //通过name+params传值的需要，需要再路径后面:参数名
    { path: '/study/:p1',name:'study', component: study },
    { path: '/learn', component: learn },
    { path: '/query', component: query },
    { path: '/params',name:'params', component: params }
]

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}
征途漫漫，唯有奋斗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值