vue 路由

2019-10-18  本文已影响0人  Joncc

vue: v2.6.10
vue-router v3.1.3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="vue.js"></script> 
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="vue_det">


        <router-link to="/login" tag="a">登录</router-link>

        <router-link to="/reg" tag="a">注册</router-link>

        <router-view></router-view>

    </div>

    <template id="tmp1">
        <h1>这是一个登陆组件</h1>
    </template>

    <template id="tmp2">
        <h1>这是一个注册组件</h1>
    </template>

    <script>


        var login = {template: '#tmp1'}
        var reg = {template: '#tmp2'}

        var routerObj = new VueRouter({
            routes: [
                {path: '/login', component: login},
                {path: '/reg', component: reg}

            ]
        })

        var vm = new Vue({
            el: '#vue_det',
            methods: {},
            router: routerObj

        })
    </script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读