路由编程式的开发

最新推荐文章于 2022-03-23 14:25:45 发布

‘安’

最新推荐文章于 2022-03-23 14:25:45 发布

阅读量101

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_48431032/article/details/120035093

版权

笔记专栏收录该内容

59 篇文章 0 订阅

订阅专栏

路由编程式的开发


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="showHome">返回首页</button>
        <button v-on:click="showOther">显示其他</button>
        <router-view></router-view>
    </div>
    <script>
    const Home = {
        template: `<div>我是返回首页</div>`
    }
    const Other = {
        template: `<div>我是别的页面</div>`
    }
    const router = new VueRouter({
        routes: [
            { path: "/home", component: Home },
            { path: "/other", component: Other },
        ]
    })

    var app = new Vue({
        el: "#app",
        router: router,
        methods: {
            showHome: function() {
                this.$router.push({ path: '/home' })
            },
            showOther: function() {
                this.$router.push({ path: '/other' })
            },
        }
    })
    </script>
</body>
</html>