zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Java IO 5 : 对象序列化
    Java IO 4 : RandomAccessFile
    3 Linux平台安装jenkins
    AWS-EC2配置swap
    2.8 环境准备-静态资源服务器搭建
    2.7 环境准备-MongoDB
    2.6 环境准备-redis
    2.5 环境准备-zookeeper
    2.4 环境准备-mysql8
    2.3 环境准备-nexus
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/11901939.html
Copyright © 2011-2022 走看看