vue-其他index.html

最新推荐文章于 2024-04-02 18:46:41 发布

虾米大王

最新推荐文章于 2024-04-02 18:46:41 发布

阅读量129

点赞数

分类专栏： Vue 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/modern358/article/details/130134888

版权

Vue 专栏收录该内容

661 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li><router-link to="/">Home</router-link></li>
            <li><router-link to="/about">About</router-link></li>
        </ul>
        <router-view></router-view>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let Home = {
            template:'<h1>This is Home!</h1>'
        };

        let About = {
            template: '<h1>This is About!</h1>'
        };

        let routes = [
            {
                path:'/',
                component:Home,
            },
            {
                path:'/about',
                component: About
            }
        ];

        let RouterLink = {
            props:['to'],
            template:'<a :href="to"><slot name="default"></slot></a>'
        };

        let RouterView = {
            data(){
                return{
                    url:window.location.pathname
                }
            },
            computed:{
                ViewComponent() {
                    return routes.find(route => route.path === this.url).component;
                }
            },
            render(h){
                return h(this.ViewComponent)
            }
        };

        let vm = new Vue({
            el:'#app',
            components:{
                RouterLink,
                RouterView,
            }
        })
    </script>
</body>
</html>