使用vuerouter时报错route is undefined

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

本人萌新，希望大神帮忙看一下，感谢啦，代码如下

<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>
</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 type="text/javascript">
        // Vue.use(VueRouter);
        var App = {
            data() {
                return {
                    // name:'login',
                }
            },
            template: `
                <div>
                    <router-link to='/login'>登录页面</router-link>
                    <router-link to='/register'>注册页面</router-link>
                    <router-view></router-view>
                </div>
            `
        };
        new Vue({
            el: '#app',
            template: `
                <App />
            `,
            router,
            components: {
                App
            },

        });
        const Login = {
            template: `
                <div>我是登录页面</div>
            `,

        };
        const Register = {
            template: `
                <div>我是注册页面</div>
            `,

        };
        const routes = [{
            path: "/login",
            name: 'login',
            component: Login,
        }, {
            path: "/register",
            name: 'register',
            component: Register,
        }, ];
        var router = new VueRouter({
            routes
        });
    </script>
</body>

</html>