vue2.0路由嵌套 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue2.0路由嵌套2</title>
        <script type="text/javascript" src="js/vue2.0.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <style type="text/css">
            .router-link-active{
                font-size:18px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box">
                <input type="button" value="添加一个路由" @click="push"/>
                <input type="button" value="替换一个路由" @click="replace"/>
            <div>
                <!--组件-->
                <router-link to="/home">主页</router-link>
                <router-link to="/user">用户</router-link>
            </div>
            <div>
                <router-view></router-view>
                
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    
    
    /*组件*/
    var Home = {
        template: '<h3>我是主页</h3>'
    }
    var User = {
        template: '<div><h3>我是用户信息</h3><ul><li><router-link to="/user/strive/age/10">Strive</router-link></li><li><router-link to="/user/blue/age/10">Blue</router-link></li><li><router-link to="/user/eric/age/10">Eric</router-link></li></ul><div><router-view></router-view></div></div>'
    }
    var UserDetail = {
        template: '<div>{{$route.params}}</div>'
    }
    /*配置路由 routes 变量名不可以写错*/
    const routes = [
        { path:'/home', component: Home },
        { 
            path:'/user', 
            component: User,
            children: [//核心
                {path: ':username/age/:age', component: UserDetail }
            ]
            
        },
        /*重定向*/
        { path:'*', redirect: 'home'}
    ];
    /*配置路由实例*/
    const router = new VueRouter({
        /*路由名字*/
        routes
    })
    /*最后挂在vue上*/
    var vm = new Vue({
        router,
        methods: {
            push(){
                /*直接添加一个路由，变现切换路由本质往历史记录里面添加一个，*/
                router.push({path:'home'})
            },
            replace(){
                router.push({path:'user'})
            }
        }
    }).$mount('#box');
    alert
</script>

 

posted @ 2017-08-30 13:10  星光泪痕  阅读(138)  评论(0)    收藏  举报