[JavaScript知识库] Vue命名路由

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue命名路由 -> 正文阅读

[JavaScript知识库]Vue命名路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // var router = []
        var Login = {
            template: '<div>登录页面</div>'
        };
        var Register = {
            template: '<div>注册页面</div>'
        };
        var router = new VueRouter({
            routes: [
                {
                    path: '/login', 
                    name: 'login',
                    component: Login
                },
                {
                    path: '/register', 
                    name: 'register',
                    component: Register
                }
            ]
        });
        var App = {
            template: `
                <div>
                    <router-link :to="{name:'login'}">登录</router-link>    
                    <router-link :to="{name:'register'}">注册</router-link>
                    <router-view></router-view>
                </div>
            `
        };
        new Vue({
            el: '#app',
            components: {
                App
            },
            template: `
                <App />
            `,
            router
        });
    </script>
</body>
</html>