模块在路由跳转中的使用

模块在路由跳转中的使用

在 模块, 路由跳转
内容 隐藏
1. html案例
2. a.js
html案例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <el-card>路由展现区
                <router-view />
            </el-card>
        </div>
    </body>
    <script type="module">
        //导入模块，模块返回一个组件
        import my from './js/a.js';
        // 创建 router 实例，然后 routes 中定义路由
        var router = new VueRouter({
            // routes
            // 每个路由绑定一个组件
            // path路由地址
            // component调用组件
            routes: [{
                path: '/',
                component: my
            }]
        })
        new Vue({
            el: '#app',
            data: {
                age: 123
            },
            components: {
                my
            },
            router
        })
    </script>
</html>
a.js
var mylogin = Vue.component('my', {
    data() {
        return {
            abc: 123
        }
    },
    template: `
        <div>
            <div>子组件的data{{abc}}</div>
        </div>
    `
})

export default mylogin;