Vue路由嵌套

Vue路由嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌套路由</title>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    Vue.use(VueRouter);
    // 声明组件路由
    var Son1={
        template:`
            <h1>我是子组件1</h1>
        `
    };
    var Son2={
        template:`
            <h1>我是子组件2</h1>
        `
    };

    // 创建路由对象
    var Home={
        template:`
            <div>
                首页内容
                <br />
                <router-link to='/home/son1'>组件1</router-link>
                <router-link to='/home/son2'>组件2</router-link>
                <router-view></router-view> 
            </div>
        `
    };

    // 命名路由
    var router=new VueRouter({
        // 配置路由对
        routes:[
            // 路由匹配规则
            {
                // 动态路由参数，以冒号开头
                path:'/home',
                name:'home',
                // 响应组件
                component:Home,
                // 路由嵌套
                children:[
                    {
                        //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，
　　　　　　　　　　　　　　　　主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path。
                        path:'son1',
                        component:Son1
                    },
                    {
                        path:'son2',
                        component:Son2
                    }
                ]
            }
        ]

    });


    var App={
        template:`
            <div>
                    <!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
                    <router-link :to = "{name:'home'}">首页</router-link>
                    
                    
                    <!--路由组件的出口-->
                    <router-view></router-view>
                </div> 
        `
    };
    new Vue({
        el:'#app',
        template:`<App />`,
        router:router,
        components:{
            App
        }
    })

</script>
posted @ 2019-11-20 23:28  Mr▪小zhou  阅读(160)  评论(0)  编辑  收藏  举报