vue的路由实现原理_vue路由的原理是动态组件吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44649210/article/details/120952378

本文介绍了如何使用Vue框架通过监听地址栏hash变化，实现不同页面组件的动态切换，利用`<router-view>`和组件导入导出实现无缝导航。

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

主要代码

主要通过监听地址栏的hash变化结合动态组件来实现对应页面的切换


<template>
  <div id="app">
    <h1>APP根组件</h1>
    <hr />
    <a href="#/Home">Home</a>
    <a href="#/Movie">Movie</a>
    <a href="#/About">About</a>
    <hr />
    <component :is="comName"></component>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Movie from "./components/Movie.vue";
import About from "./components/About.vue";

export default {
  name: "App",
  components: {
    Home,
    Movie,
    About,
  },
  data() {
    return {
      comName: "Home",
    };
  },
  mounted() {
    window.onhashchange = () => {
      //onhashchange是检测地址栏中哈希值的变化

      switch (location.hash) {
        case "#/Home":
          this.comName = "Home";
          break;
        case "#/Movie":
          this.comName = "Movie";
          break;
        case "#/About":
          this.comName = "About";
          break;
      }
    };
  },
};
</script>

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../test/js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 100%;
            height: 40px;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .nav .item {
            flex: 1;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }

        .nav .active {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <div class="item">
                <router-link to="/">首页</router-link>
            </div>
            <div class="item">
                <router-link to="/about">关于</router-link>
            </div>
            <div class="item">
                <router-link to="/list">列表</router-link>
            </div>
            <div class="item">
                <router-link to="/test">测试</router-link>
            </div>
            <div class="item">
                <router-link to="/newPage">新页面</router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</body>

<template id="home">
    <div>
        首页
    </div>
</template>
<template id="about">
    <div>
        关于
    </div>
</template>
<template id="list">
    <div>
        列表
    </div>
</template>
<template id="routerLink">
    <a :href="'#'+to">
        <slot></slot>
    </a>
</template>
<template id="routerView">
    <div>
        <component :is="com"></component>
    </div>
</template>
<template id="test">
    <div>
        测试
    </div>
</template>
<template id="newPage">
    <div>
        新页面
    </div>
</template>
<script>
    let home = {
        template: "#home"
    }
    let about = {
        template: "#about"
    }
    let list = {
        template: "#list"
    }
    let test = {
        template: "#test"
    }
    let newPage = {
        template: "#newPage"
    }

    let routerLink = {
        props: ["to"],
        template: "#routerLink"
    }
    let routerView = {
        data() {
            return {
                com: "home",
                list: [{ id: 1, msg: "首页", com: "home", path: "/" }, { id: 2, msg: "关于", com: "about", path: "/about" }, { id: 3, msg: "列表", com: "list", path: "/list" }, { id: 4, msg: "测试", com: "test", path: "/test" }, { id: 4, msg: "这是一个新页面", com: "newPage", path: "/newPage" }]
            }
        },
        template: "#routerView",
        components: {
            home,
            about,
            list,
            test,
            newPage
        },
        mounted() {//页面结构加载完成
            window.onhashchange = () => {//hash值发生改变的事件
                // console.log(window.location.hash);
                let hash = window.location.hash;//得到值 #/about  #/list  
                hash = hash.split("#/")[1];//得到没有#/的值
                //根据hash知道对应的组件
                if (hash) {
                    let list = this.list.filter(item => item.com == hash);//找到这个集合
                    if (list.length) {//能找到
                        let info = list[0];
                        this.com = info.com;
                    }
                } else {
                    this.com = "home";
                    this.activeIndex = 1
                }
            };


        }
    }

    new Vue({
        el: "#app",
        components: {
            routerLink,
            routerView
        },
    })
    // window.onhashchange



</script>

</html>