<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-link to="/home">主页</router-link>

    <router-link to="/user">用户</router-link>

    <router-view></router-view>

</div>

<template id="user">

    <div>

        <h1>用户信息</h1>

        <ul>

            <li><router-link to="/user/regist">用户注册</router-link></li>

            <li><router-link to="/user/login">用户登录</router-link></li>

        </ul>

        <router-view></router-view>

    </div>

</template>

</body>

<script>

    var home={

        template:'<h1>home</h1>'

    };

    var user={

        template:'#user'

    };

    let login={

        template:'<h1>登录中....</h1>'

    };

    let regist={

        template:"<h1>注册</h1>"

    }

    const routes1=[

        {path:'/home',component:home},

        {path:'/user',component:user,

        children:[

            {

            path: 'login',

            component: login,

            },

            {

             path:'regist',

             component:regist

            }

        ]},

        // {path:'*',redirect:'/home'}

    ];

    const router = new VueRouter({

        routes:routes1,

    });

    new Vue({

        el:'#app',

        router

    })

</script>

</html>

vue之路由嵌套,子路由的更多相关文章

  1. angular2系列教程（十一）路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  2. 六、Vue-Router：基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用

    一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...

  3. vue教程3-06 vue路由嵌套(多层路由)，路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. vue 导航菜单默认子路由

    export default new Router({ routes: [ { path: '/', name: 'index', component: index, children: [ { pa ...

  5. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  6. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

  7. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. vue - 子路由-路由嵌套

    描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展 ...

  9. Vue路由嵌套和命名视图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 设计模式之状态模式（State ）

    状态模式是根据其状态变化来改变对象的行为,允许对象根据内部状态来实现不同的行为.内容类可以具有大量的内部状态,每当调用实现时,就委托给状态类进行处理. 作用 当一个对象的内在状态改变时允许改变其行为, ...

  2. 如何在UWP中统一处理不同设备间的页面回退逻辑

    已经有一段时间没有写博客来记录自己的学习点滴了.现在回想起来确实有些惭愧,期间经历了一些事情,到目前为止算是平息了,是时候该收收心来充实自己了. 在本篇缪文中,楼主打算给UWP开发的初学者讲述一个在开 ...

  3. c++中的this指针和c#中的this引用

    先总结一下: 在c++中this为指针,使用"->"操作符来获取当前实例中的成员 在c#中this为引用,使用"."操作符来获取当前实例中的成员 下面内容 ...

  4. [HTML/CSS]有一种节点叫做文本节点

    HTML可以看成是由节点(node)组成的树结构 我们一般都是在<p>节点里面写字符串. 在上图中,<p>节点和字符串之间有一个text, 这个text就是文本节点. 我们可以 ...

  5. BZOJ2705: [SDOI2012]Longge的问题(欧拉函数)

    题意 题目链接 Sol 开始用反演推发现不会求\(\mu(k)\)慌的一批 退了两步发现只要求个欧拉函数就行了 \(ans = \sum_{d | n} d \phi(\frac{n}{d})\) 理 ...

  6. 商业智能BI-基础理论知识总结 ZT

    因为要加入一个BI项目,所以最近在研究BI相关的知识体系,由于这个方面的知识都是比较零散,开始都很多概念,不知道从何入手,网上找的资料也不多,特别是实战案例方面更少,这里还是先把理论知识理解下吧,分享 ...

  7. Kotlin入门(20)几种常见的对话框

    提醒对话框手机上的App极大地方便了人们的生活,很多业务只需用户拇指一点即可轻松办理,然而这也带来了一定的风险,因为有时候用户并非真的想这么做,只是不小心点了一下而已,如果App不做任何提示的话,继续 ...

  8. 【Java入门提高篇】Day29 Java容器类详解（十一）LinkedHashSet详解

    当当当当当当当,本来打算出去浪来着,想想还是把这个先一起写完吧,毕竟这篇的主角跟我一样是一个超级偷懒的角色——LinkedHashSet,有多偷懒?看完你就知道了. 本篇将从以下几个方面对Linked ...

  9. python：序列化与数据持久化

    数据持久化的方式有: 1.普通文件无格式写入:将数据直接写入到文件中 2.普通序列化写入:json,pickle 3.DBM方式:shelve,dbm 相关内容: json pickle shelve ...

  10. [20180614]删除bootstrap$记录无法启动2.txt

    [20180614]删除bootstrap$记录无法启动2.txt --//前几天看链接http://www.xifenfei.com/2018/05/willfully-delete-bootstr ...