Vue路由

一个人走在路上發表於2024-09-15
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>

相關文章