vue-route的使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<script>
    //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
        const Home = {   //局部组件
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }
    const Course = {
        data() {
            return {}
        },
        template: `<div>我是免费课程</div>`
    }
    //创建路由
    const router = new VueRouter({
         //定义路由规则
        // mode:'history',
        routes:[
            {
                path:'/',
                redirect:'/home'

            },
            {
            path:'/home',
            component:Home
            },
            {
                path:'/course',
                component:Course
            }
        ]

    })


    let App={
            data(){
                return{

                }
            },
        //        router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        template:`
             <div>

                <div class="header">
                   <router-link to="/home">首页</router-link>
                    <router-link to="/course">免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>


        `,
    }
    new Vue({
        el:'#app',
        router,   //记得一定要挂在;路由对象
        data(){
            return{

            }
        },
          template: `<App />`,
        components: {
            App
        }
    })
</script>
</body>
</html>

 

posted @ 2018-12-01 18:26  团子emma  阅读(132)  评论(0)    收藏  举报