VUE路由跳转与讲解

最新推荐文章于 2024-07-27 11:33:23 发布

文阳兄

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量614

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/107768201

版权

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

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

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',

最低0.47元/天解锁文章

文阳兄

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE路由跳转与讲解

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-U
复制链接

扫一扫