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">
        <router-link to="/login">登录</router-link>｜
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <template id="login">
        <div> 登录页面 </div>
    </template>

    <template id="resigter">
        <div> 注册页面 </div>
    </template>
    <script src="vue.js"></script>
    <script src="vur-router.js"></script>
    <script>

        //1定义组件配置项

        let Login = {
            template: '#login'
        }

        let resigter = {
            template: '#resigter'
        }
  
        //2定义路由列表配置项
        let routes = [
            {
                path: '/login',
                component: Login
            },
            {
                path: '/register',
                component: resigter
            }
        ]

        //3创建路由实例
        let router = new VueRouter({
            routes: routes
        })

        Vue.component('my-component', {
            template: '<div>This is my component</div>'
        })

        //4创建Vue实例并挂载路由实例
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },
            //绑定路由实例
            router: router

        })
    </script>
</body>

</html>
posted @ 2024-09-15 14:14  一个人走在路上  阅读(13)  评论(0)    收藏  举报