IT虾米网

vue2.0路由嵌套详解

leader 2019年05月21日 编程语言 130 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>

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

ps快捷键总结详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。