vue3路由

最新推荐文章于 2024-07-22 14:15:06 发布

意巷浓

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量816

点赞数 23

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/weixin_56534351/article/details/136418861

版权

本文详细介绍了如何在Vue3中使用VueRouter进行前端路由配置，包括基本路由、动态路由（带参数的路由）和嵌套路由的应用示例，帮助开发者更好地理解和实现单页应用的页面切换功能。

摘要由CSDN通过智能技术生成

什么是前端路由

路由是根据不同的 url 地址展示不同的内容或页面
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做

安装

认识Vue Router

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。官网： Vue Router | Vue.js 的官方路由用 Vue.js + Vue Router 创建单页应用

下载vue-router.js

vue-router3.x是针对Vue2.x版本 vue-router4.x是针对Vue3.x版本

npm install vue-router@4

基础路由配置

Vue3

src/router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
// 3. 创建路由实例并传递 routes配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // routes: routes的缩写
})
//4. 导出router
export default router

main.js

import { createApp } from 'vue'
// -----------------------------------1. 引入router
import router from './router/index.js'
const app= createApp(App)
import App from './App.vue'
//----------------------------------2. 使用router
//确保 use路由实例使整个应用支持路由
// 通过调用 app.use(router)，我们会触发第一次
// 导航且可以在任意组件中以 this.$router 的形式访问它，
// 并且以 this.$route 的形式访问当前路由
app.use(router)
app.mount('#app')

App.vue

router-link组件进行导航 , 通过传递 to 来指定链接, <router-link>将呈现一个带有正确href属性的<a>` 标签

router-view组件定义路由出口，路由匹配到的组件将渲染在这里

<script setup>
</script>
<template>
    <div class="app">
        <h1>Hello App!</h1>
        <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 to来指定链接 -->
            <!--<router-link>将呈现一个带有正确 href属性的 <a>标签-->
            <router-link to="/">Go to Home</router-link>
            <router-link to="/about">Go to About</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>
<style lang='scss' scoped></style>

路由出口

<router-view></router-view>

路由跳转（即路由导航）

<router-link to="/index"></router-link>

动态路由

Vue3

能够接收路径参数的路由称为动态路由应用场景：在用户列表页需要查看用户详情，在跳转到详情页时，需要传递用户的userId

案例1-列表跳详情

配置动态路由 src/router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
const routes = [
  //列表页路由配置
  { path: '/', component: List },
  //详情页路由配置
  { path: '/detail/:userId/:type', component: Detail },
  // { path: '/detail/:userId/:type', component: Detail },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
export default router

定义路由出口 App.vue

<template>
   <router-view></router-view>
</template>

列表页 src/views/List.vue

<script setup>
import { ref } from 'vue';
// 用户列表
let userList = ref([
    {
        userId: 1,
        user: 'Jenny'
    },
    {
        userId: 2,
        user: 'Bob'
    },
    {
        userId: 6,
        user: 'Nancy'
    }
])
</script>
<template>
    <div class="list">
        list
        <ul>
            <li v-for="item in userList" :key="item.userId">
                <!-- 动态路由传递路径参数 -->
                <router-link :to="/detail/${item.userId}">
                    {{ item.user }}
                </router-link>
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped></style>

详情页 src/views/Detail.vue

在script setup中，要使用useRoute来访问路由参数在模板中用$route.params.XX来访问路由参数

<script setup>
import { onMounted } from 'vue';
// 1. 引入useRoute
import { useRoute } from 'vue-router'
// 2. 调用 useRoute，获取路由记录对象
let route = useRoute()
onMounted(() => {
    // 3. 通过route.params.XX来访问动态路由传参
    console.log(route.params.userId);
})
</script>
<template>
    <div class="detail">
        <router-link to="/">返回列表</router-link>
        <br>
        detail
        <br>
        <!-- 4. 在模板中用
$route访问路由记录对象 -->
        当前用户的id是: {{ $
route.params.userId }}
    </div>
</template>
<style lang="scss" scoped></style>

嵌套路由

参考-练习嵌套路由所需代码模板

根据自已需要修改

路由配置

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "../views/Index.vue";
import Category from "../views/Category.vue";
import Cart from "../views/Cart.vue";
import Recommend from "../views/Recommend.vue";
import Ai from "../views/Ai.vue";
import Tv from "../views/Tv.vue";
import List from "../views/List.vue";
import Detail from "../views/Detail.vue";
const routes = [
  { path: "/", redirect: '/home' },
  {
    path: "/home",
    component: Index,
    redirect: '/home/recommend',
    children: [
      {path: "recommend", component: Recommend},
      {path: "ai", component: Ai},
      {path: "tv", component: Tv}
    ]
  },
  { path: "/category", component: Category },
  { path: "/cart", component: Cart },
  { path: "/list", component: List },
  { path: "/detail/:userId", component: Detail },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

App.vue

<script setup>
import VFooter from "./views/VFooter.vue";
</script>
<template>
   <RouterView></RouterView>
   <VFooter></VFooter>
</template>

VFooter.vue

<script setup>

</script>
<template>
   <div class="footer">
       <!-- <p>首页</p>
       <p>分类</p>
       <p>购物车</p> -->
       <RouterLink to="/home">首页</RouterLink>
       <RouterLink to="/category">分类</RouterLink>
       <RouterLink to="/cart">购物车</RouterLink>
   </div>
</template>
<style lang="scss" scoped>
.footer {
    display: flex;
    justify-content: space-around;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #bba473;
}
</style>

Index.vue

<script setup>

</script>
<template>
   <div class="index">
       <!-- 首页top -->
       <div class="top">top</div>
       <!-- 首页导航 -->
       <div class="nav">
         <RouterLink  to="/home/recommend">推荐</RouterLink>
         <RouterLink  to="/home/ai">智能</RouterLink>
         <RouterLink  to="/home/tv">电视</RouterLink>
       </div>
       <router-view></router-view>
   </div>
</template>
<style lang="scss" scoped>
.top {
    height: 50px;
    background-color: #9ae1e1;
}
.nav {
    display: flex;
    justify-content: space-around;
}
</style>

List.vue

<script setup>
import { ref } from 'vue';
import Detail from '../../src copy/views/Detail.vue';
let userList = ref([
    {
        userId: 1,
        user: 'Jenny'
    },
    {
        userId: 2,
        user: 'Bob'
    },
    {
        userId: 6,
        user: 'Nancy'
    }
])
</script>
<template>
    <div class="list">
        list
       

    </div>
</template>
<style lang="scss" scoped></style>

Detail.vue

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router'
let route = useRoute()
onMounted(() => {
    console.log(route.params.userId);
})
</script>
<template>
    <div class="detail">
        <router-link to="/">返回列表</router-link>
        <br>
        detail
        <br>
        当前用户的id是: {{ $route.params.userId }}
    </div>
</template>
<style lang="scss" scoped></style>

Vue3嵌套路由

比如：小米的页面级路由组件有"首页", "分类","购物车" 小米首页存在嵌套路由组件："推荐"，"智能"、"电视"

路由配置

src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "../views/Index.vue";
import Category from "../views/Category.vue";
import Cart from "../views/Cart.vue";
import Recommend from "../views/Recommend.vue";
import Ai from "../views/Ai.vue";
import Tv from "../views/Tv.vue";
import List from "../views/List.vue";
import Detail from "../views/Detail.vue";
const routes = [
  { path: "/", redirect: '/home' },
  {
    path: "/home",
    component: Index,
    redirect: '/home/recommend',
    children: [
      {path: "recommend", component: Recommend},
      {path: "ai", component: Ai},
      {path: "tv", component: Tv}
    ]
  },
  { path: "/category", component: Category },
  { path: "/cart", component: Cart },
  { path: "/list", component: List },
  { path: "/detail/:userId", component: Detail },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

App根组件

App.vue

<script setup>
import VFooter from "./views/VFooter.vue";
</script>
<template>
   <router-view></router-view>
   <VFooter></VFooter>
</template>

首页组件

index.vue

<script setup>

</script>
<template>
   <div class="index">
       <!-- 首页top -->
       <div class="top">top</div>
       <!-- 首页导航 -->
       <div class="nav">
         <router-link to="/home/recommend">推荐</router-link>
         <router-link to="/home/ai">智能</router-link>
         <router-link to="/home/tv">电视</router-link>
       </div>
       <router-view></router-view>
   </div>
</template>
<style lang="scss" scoped>
.top {
    height: 50px;
    background-color: #9ae1e1;
}
.nav {
    display: flex;
    justify-content: space-around;
}
</style>