vue3路由

已于 2024-09-28 23:25:05 修改
阅读量396 收藏 3
点赞数 4
分类专栏： Vue 文章标签： vue.js 前端
于 2024-09-26 23:11:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46515691/article/details/142579808
版权

使用

定义组件

新建components文件夹，新建About、News、Home组件

Home组件

<template>
    <div class="home">
      <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
    </div>
  </template>
  
  <script setup lang="ts" name="Home">
  
  </script>
  
  <style scoped>
    .home {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  </style>

News组件

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id">
          <RouterLink to="/news/detail">{{news.title}}</RouterLink>
        </li>
      </ul>
      <!-- 展示区 -->
      <div class="news-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  
  <script setup lang="ts" name="News">
    import {reactive} from 'vue'
    import {RouterView,RouterLink} from 'vue-router'
  
    const newsList = reactive([
      {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
      {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
      {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
      {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
    ])
  
  </script>
  
  <style scoped>
  /* 新闻 */
  .news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .news ul {
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;
  }
  .news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>

About组件

<template>
    <div class="about">
      <h2>大家好，欢迎来到尚硅谷直播间</h2>
    </div>
  </template>
  
  <script setup lang="ts" name="About">
    import {onMounted,onUnmounted} from 'vue'
  
    onMounted(()=>{
      console.log('About组件挂载了')
    })
    onUnmounted(()=>{
      console.log('About组件卸载了')
    })
  </script>
  
  <style scoped>
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgb(85, 84, 84);
    font-size: 18px;
  }
  </style>

Detail.vue

<template>
    <ul class="news-list">
        <li> 编号：****</li>
        <li> 标题：****</li>
        <li> 内容：****</li>
    </ul>
</template>

<script setup lang="ts" name="Header">

</script>

<style scoped>
    .news-list {
        list-style:none;
        padding-left: 20px;
    }
    .news-list li {
        margin-bottom: 30px;
    }
</style>

定义路由规则

新建router文件夹，编写index.ts文件

// 第一步：引入createRouter、createWebHashHistory
import { createRouter, createWebHistory } from 'vue-router'

// 第二步：引入组件
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

// 第三步：创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    path:'detail',
                    component: Detail
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

// 第四步：导出路由实例
export default router

修改main.ts

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载到 #app
app.mount('#app')

使用路由

<template>
  <div class="app">
    <Header />
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterView,RouterLink} from 'vue-router'
  import Header from './components/Header.vue'

</script>

<style>
    /* App */
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.active {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }
</style>

实现效果

在这里插入图片描述

query参数

上述实现是将新闻内容写死，要想实现点击不同新闻连接可以显示不同内容，就要使用query传值方式。重新修改News.vue和Detail.vue。

News.vue

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> -->
        <!-- 使用query传参 -->
          <RouterLink 
            :to="{
              path: '/news/detail',
              query: {
                id: news.id,
                title: news.title,
                content: news.content
              }
            }"
            >
            {{news.title}}
          </RouterLink>
        </li>
      </ul>
      <!-- 展示区 -->
      <div class="news-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  
  <script setup lang="ts" name="News">
    import type { idText } from 'typescript';
import {reactive} from 'vue'
    import {RouterView,RouterLink} from 'vue-router'
  
    const newsList = reactive([
      {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
      {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
      {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
      {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
    ])
  
  </script>
  
  <style scoped>
  /* 新闻 */
  .news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .news ul {
    margin-top: 30px;
    /* list-style: none; */
    padding-left: 10px;
  }
  .news li::marker {
    color: #64967E;
    font-size: 18px;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>

Detail.vue

<template>
    <ul class="news-list">
        <li> 编号: {{ query.id }} </li>
        <li> 标题：{{ query.title }} </li>
        <li> 内容：{{ query.content }} </li>
    </ul>
</template>

<script setup lang="ts" name="Header">
    import { toRef, toRefs } from 'vue';
import { useRoute } from 'vue-router';

    let route = useRoute();
    // 不用 toRefs 不会是响应式
    let {query} = toRefs(route);
</script>

<style scoped>
    .news-list {
        list-style:none;
        padding-left: 20px;
    }
    .news-list li {
        margin-bottom: 30px;
    }
</style>

实现效果

在这里插入图片描述

params参数

也可使用params传值方式。

index.ts

使用params传值方式时需要首先在对应路由路径中占位

// 第一步：引入createRouter、createWebHashHistory
import { createRouter, createWebHistory } from 'vue-router'

// 第二步：引入组件
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

// 第三步：创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    name:'xijie',
                    // 使用pathParams来接收参数需要给参数定位符
                    path:'detail/:id/:title/:content?',
                    component: Detail
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

// 第四步：导出路由实例
export default router

News.vue

在中只能使用name属性来定义路由要跳转位置

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id">
          <!-- 使用query传参 -->
          <!-- <RouterLink 
            :to="{
              path: '/news/detail',
              query: {
                id: news.id,
                title: news.title,
                content: news.content
              }
            }"
            > 
            {{news.title}}
          </RouterLink>-->
          <!-- 使用params传参 -->
          <RouterLink :to="{
            name: 'xijie',
            params: {
              id: news.id,
              title: news.title,
              content: news.content
            }
          }">
            {{news.title}}
          </RouterLink>
        </li>
      </ul>
      <!-- 展示区 -->
      <div class="news-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  
  <script setup lang="ts" name="News">
    import type { idText } from 'typescript';
	import {reactive} from 'vue'
    import {RouterView,RouterLink} from 'vue-router'
  
    const newsList = reactive([
      {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
      {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
      {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
      {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
    ])
  
  </script>
  
  <style scoped>
  /* 新闻 */
  .news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .news ul {
    margin-top: 30px;
    /* list-style: none; */
    padding-left: 10px;
  }
  .news li::marker {
    color: #64967E;
    font-size: 18px;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>

Detail.vue

<template>
    <ul class="news-list">
        <li> 编号: {{ params.id }} </li>
        <li> 标题：{{ params.title }} </li>
        <li> 内容：{{ params.content }} </li>
    </ul>
</template>

<script setup lang="ts" name="Header">
    import { toRefs } from 'vue';
import { useRoute } from 'vue-router';

    let route = useRoute();
    // 不用 toRefs 不会是响应式
    let { params } = toRefs(route);
</script>

<style scoped>
    .news-list {
        list-style:none;
        padding-left: 20px;
    }
    .news-list li {
        margin-bottom: 30px;
    }
</style>

实现效果

在这里插入图片描述

props配置

在Detail.vue中，每个变量都是params.**太啰嗦，可以通过props配置省略params. ，直接用id，title，content字段。
在这里插入图片描述

index.ts

// 第一步：引入createRouter、createWebHashHistory
import { createRouter, createWebHistory } from 'vue-router'

// 第二步：引入组件
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

// 第三步：创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    name:'xijie',
                    // 使用query来接收参数
                    path:'detail',
                    // 使用pathParams来接收参数需要给参数定位符
                    // path:'detail/:id/:title/:content?',
                    component: Detail,
                    // 第一种写法：将路由收到的所有params参数作为props传给路由组件
                    // props:true,

                    // 第二种写法：用query时候，函数写法，可以自己决定将什么作为props给路由组件
                    props(route){
                        return route.query
                    }
                    // 第三种写法(不常用)：对象写法，可以自己决定将什么作为props给路由组件()
                    /* props:{
                        a:100,
                        b:200,
                        c:300
                    } */
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

// 第四步：导出路由实例
export default router

Detail.vue

<template>
    <ul class="news-list">
        <li> 编号: {{ id }} </li>
        <li> 标题：{{ title }} </li>
        <li> 内容：{{ content }} </li>
    </ul>
</template>

<script setup lang="ts" name="Header">
    import { toRefs } from 'vue';
import { useRoute } from 'vue-router';

    let route = useRoute();
    // 不用 toRefs 不会是响应式
    let { params } = toRefs(route);
    // 接收到路由参数
    defineProps(['id', 'title', 'content'])
</script>

<style scoped>
    .news-list {
        list-style:none;
        padding-left: 20px;
    }
    .news-list li {
        margin-bottom: 30px;
    }
</style>
有一个好名字
关注
专栏目录
vue3路由基本使用
qq_48763502的博客
09-13 3830
在 Vue 3 中，路由指的是应用程序的导航系统，允许你在不同的视图或页面之间进行切换。通过 vue-router 插件，你可以定义路由规则，将 URL 路径映射到 Vue 组件，实现页面间的跳转和状态管理。使用路由，用户可以在应用中导航不同的视图，同时保持浏览器的历史记录。 2. 创建路由配置 定义路由配置通常在一个单独的文件中完成，例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性： 3. 在应用中使用路由 在你的 Vue 应用中，通常会在 mai
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue3路由跳转方法
热门推荐
jdhrucn的博客
09-20 4万+
vue3.0要注意，setup组件是在初始化之前执行，所以this还不是实例对象。vue3.0的处理方法就是，从vue-router中引入useRouter。利用useRouter来进行路由的跳转。首先，vue3.0跳转和vue2.0跳转方式差别不大，但是还有需要注意的地方。这里我介绍两种比较常见的路由跳转方法。name值是你在路由配置中的name属性。to 是你要跳转的路径，也就是接口。绑定点击事件的时候传入参数，进行判断跳转到哪个页面。1.利用router-link标签来进行跳转。
Vue3路由传参
qq_54334713的博客
09-06 1万+
Vue3路由传参
Vue3路由跳转
tiancaicong_的博客
08-16 3699
Vue 3使用Vue Router来管理应用程序的路由。Vue Router是Vue.js官方提供的路由管理插件，用于实现单页面应用（SPA）中的路由导航。
Vue3路由守卫
qq_54334713的博客
09-06 1万+
三种路由守卫
Vue3路由跳转并传递参数
聂可以的博客
06-06 7072
Vue3路由跳转并传递参数
vue3路由重定向
风中追风
09-07 9891
指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；1.新建项目 并引入vue和vue-router；4.使用redirect 属性设置路由重定向；3.createRouter定义和配置路由；2.使用Vue.use注册路由；
Vue3路由回退
gurenchang的博客
08-17 5034
2.在中引入需要的路由组件useRoute，并引用。1.在需要回退的页面，添加一个按钮，然后为这个按钮添加一个点击事件。3.调用回退事件的方法，实现点击事件绑定的函数。
vue3路由使用，vue3路由使用
12-28
在这个项目中，我们看到与 Vue3 路由相关的配置和文件结构。 1. **Vue Router 基础** - **安装**：Vue Router 可通过 npm 安装，`npm install vue-router` 或 `yarn add vue-router`。 - **创建实例**：在主应用...
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
「Vue3系列」Vue3 路由
日常笔记/总结/系列知识梳理
03-06 1255
路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 876
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 587
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
Vue使用Vue Router路由：开发单页应用
pan_junbiao的博客
09-23 1369
在单页 Web 应用中，整个项目只有一个 HTML 文件，不同视图（组件的模块）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之前的跳转都是在浏览器端完成的，这时就需要使用前端路由。路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。
计算机毕业论文基于VUE的贫困生助学信息审核管理系统开发与实现
计算机程序开发设计
09-23 952
贫困生助学审核信息管理系统旨在为学校提供一个高效、透明的平台，用于管理和审核贫困生的助学申请。系统主要分为三个角色：管理员、审核员和贫困生。每个角色有不同的权限和功能，以确保系统的正常运行和数据的安全性。
vue无感刷新Token并重新请求
Faaaaaaq的博客
09-22 522
vue 拦截器拦截401重新请求Token 无感刷新Token 之后重新请求报401的接口。
VueUse-----基于 Vue 3 的实用工具库，常用功能介绍及使用案例
最新发布
Yluciud的博客
09-27 431
VueUse是一个基于Vue 3的实用工具库，它提供了一系列的组合式 API（Composition API）函数，可以帮助你更方便地处理常见的任务。VueUse包含了大量的功能，如状态管理、浏览器 API 封装、响应式数据处理等。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 226
【代码】Ant design vue中的提示框（a-tooltip）
vue3 路由使用实例
06-13
好的，以下是一个简单的 Vue 3 路由使用示例： 1. 首先，需要在项目中安装 Vue Router： ``` npm install vue-router@next ``` 2. 在 main.js 中导入并使用 Vue Router： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 3. 创建路由实例并配置路由： ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在上面的示例中，我们定义了两个路由，分别是 `/` 和 `/about`，并且分别对应两个组件 `Home` 和 `About`。 4. 在组件中使用路由： ```html <template> <div> <h1>Home</h1> <router-link to="/about">About</router-link> </div> </template> ``` 在上面的示例中，我们使用了 `router-link` 组件来实现路由跳转。 当用户点击 `router-link` 组件时，会自动跳转到 `/about` 路由对应的组件。同时，浏览器的地址栏也会相应地更新。 这就是一个简单的 Vue 3 路由使用示例。希望能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值