vue路由,使用Vue-Router 创建二级路由,嵌套路由 - 前端笔记-使用vue-router创建 二级路由 原理和vue-router工具使用差不多,就更改几个地方 补充几点: 1.自定义属性可以不用挂载到,vue实例下面,(因为你等会还要挂载.....

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>vue路由,使用Vue-Router 创建二级路由,嵌套路由 - 前端笔记
使用vue-router创建  二级路由   原理和vue-router 工具使用差不多,就更改几个地方 
补充几点:
1.自定义属性可以不用挂载到,vue实例下面,(因为你等会还要挂载到,VueRouter 实例下面)
2.二级路由的路劲可以简写的哈,简写也要注意  不能在login 路由地下挂载一个  zc路由的二级栏目(如果在login路由地下挂载,zc路由,一定不能简写,必须把路劲写全)


  <!-- //引入 js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>
    <div id='app'>

        <!-- 创建路由链接文件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/zc">注册</router-link>
        <!-- 创建路由填坑文件 -->
        <router-view></router-view>

    </div>
    <script type='text/javascript'>
        // 自定义组件   可以不添加到vue实例中
        var login = {
            //在login 路由下面挂载的二级路由
            template: `<div>我是登录
                <router-link to="/login/ll">ll</router-link>
                <router-link to="/zc/ls">ls</router-link>

                <router-view></router-view>
                
                </div>`
        }
        var zc = {
            template: `<div>我是注册</div>`
        }
        var ll = {
            template: `<h1>ll</h1>`
        }
        var ls = {
                template: `<h1>ls</h1>`
            }
            //创建  vue-router实例
        const router = new VueRouter({

            routes: [{
                path: '/login',
                component: login
            }, {
                path: '/zc',
                component: zc
            }, ]
              children: [{
                path: '/login/ll',
                component: ll
            }, {
                path: '/zc/ls',
                component: ls
            }]
        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },

            //可以不夸张vue实例中
            components: {
                login,
                zc,
                ll,
                ls
            },
            //把return挂载到bue实例下
            router
        });
    </script>

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue路由,使用Vue-Router 创建二级路由,嵌套路由

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)