39_嵌套路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to="/home">主页</router-link>
                <router-link to="/about">关于</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script type="text/javascript" src="vue.js" ></script>
        <script type="text/javascript" src="vue-router.js" ></script>
        <script>
            const Product={
                //产品组件
                template:"<div style='border:1px solid #000'><h2>产品</h2><p>产品的内容。。。。</p></div>"
            }
            
            const router=new VueRouter({
                routes:[
                    {
                        path:'/home',
                        component:{
                            template:"<div><h1>主页</h1><p><router-link to='/home/product'>产品</router-link></p><router-view></router-view></div>"
                        },
                        children:[
                            {//配置嵌套的子路由
                                path:"product", //在/home基础上追加/product路径,不能设置path:"/product"，这样设置是设置完整路径
                                component:Product
                            },
                            {
                                path:'',
                                redirect:'product'
                            }
                        ]
                    },
                    {
                        path:'/about',
                        component:{
                            template:"<div><h3>关于</h3>关于我们，电话12344455</div>"
                        }
                        
                    },{
                        path:'/',   //默认加载的路径，页面加载起来时的初始路径
                        redirect:'/home'    //重定向
                    }
                ]
            })
            
            var vm=new Vue({
                el:"#app",
                router  //将路由对象注入到Vue实例上
            })
            
        </script>
    </body>
</html>
39_嵌套路由

推荐阅读更多精彩内容
