master

分支 (1)

管理

管理

master

vuetest
/
routertest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>vue-router</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src='vue-router.js'></script>
<script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
</head>
<body>

   <div id="app">
    <div>
        <ul>
            <li><router-link to="/home">首页</router-link></li>
            <li><router-link to="/user">个人中心</router-link></li>
        </ul>
    </div>
    <div>
        <router-view name="user">
        </router-view>
    </div>
   </div>

   <script>
        Vue.use(VueRouter)
    var Home=Vue.extend({
        template:'这是首页页面'
    });
  //  Vue.component('Home',Home);
    //创建一个根实例
    var router=new VueRouter({
        routes:[
            {
                path:'/home',
                name:'home',
                component:Home
              /*  beforeEnter:(to,from,next)=>{
                    console.log(to);
                    console.log(from);
                    console.log(next);
                }*/
            },
            {
                path:'/user',
                name:'user',
                component:{
                    template:'这是个人中心页'

                }
            }
        ]
    });

    var vm=new Vue({
        router:router
    }).$mount('#app');

   </script>
</body>
</html>