VUE路由跳转与讲解

最新推荐文章于 2025-06-20 21:46:53 发布

原创

最新推荐文章于 2025-06-20 21:46:53 发布 · 678 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vue中的路由跳转，包括不带参数的静态路由和带参数的动态路由。在静态路由中，详细阐述了定义路由组件、路由表、实例化和注册路由的过程。在动态路由部分，提到了利用Promise进行回调处理，并解释了req和res的概念。此外，还讨论了嵌套路由的实现，如通过redirect指定默认显示内容，以及如何在首页点击后展示电影、商城、演出等具体内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE简单路由跳转与讲解不带参

静态路由
1定义路由组件
2定义路由表
3实例化路由对象
4注册路由对象
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
   
   
       margin: 0;
       padding: 0;
       list-style: none;
       text-decoration: none;
    }
    .main{
   
   
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    ul{
   
   
        display: flex;
        justify-content: space-between;
    }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <div class="main">
            <ul>
                <router-link to="/" tag="li">首页</router-link>
                <router-link to="/order" tag="li">发现</router-link>
                <router-link to="/discover" tag="li">内容</router-link>
                <router-link to="/Myself" tag="li">我的</router-link>
            </ul>
        </div>
    </div>
    <script src="./vue/vue.min.js"></script>
    <script src="./vue/vue-router.js"></script>
    <script src="./vue/axios.min.js"></script>
    <script>
        // 定义4个组件 通过路由的方式实现Tab切换
        // path匹配当前路由参数 使定义组件放置定义的路由里面
        // 存放在跟组件 
        //  <router-view></router-view> 放置需要跳转内容
        // to挂载匹配的内容跳转  tag后跟要形成的标签
        const Index={
   
   
            template:`
            <div>首页</div>
            `
        }
        const Order={
   
   
            template:`
            <div>发现</div>
            `
        }
        const Discover={
   
   
            template:`
            <div>内容</div>
            `
        }
        const Myself={
   
   
            template:`
            <div>我的</div>
            `
        }
        const routes=[{
   
   
            path:'/',
            component:Index
        },
        {
   
   
            path:'/order',
            component