<!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. IDEA 在使用的过程中字符间距变大的问题

    解决办法:shift+空格半角全角快捷键

  2. 将第三方包安装到maven本地仓库

    今天在做jasper report生成pdf文档的时候,需要引入亚洲字体jar包.maven仓库是有这个jar包,但是在项目pom文件始终不能下载.无奈只有将jar包安装到maven本地仓库. 1 将 ...

  3. 3038 3n+1问题

    3038 3n+1问题  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 3n+1问题是一个简单有趣而又没有 ...

  4. Autoit3操作网页实现自动化

    Autoit3 本身有内置的用户自定义函数IE.au3,只限于IE浏览器,如果是Firefox浏览器需要另外自定义函数. 找了很多资料发现有个FF.au3的自定义函数,下载地址 http://www. ...

  5. Code::Blocks + GDAL

    [root@server20 ~]# yum install cmake cmake-gui [root@server20 ~]# yum install cairo-devel libcurl-de ...

  6. 安卓开发_浅谈主配置文件（AndroidManifest.xml）

    AndroidManifest.xml本质:是整个应用的主配置清单文件包含:该应用的包名,版本号,组件,权限等信息作用:记录该应用的相关的配置信息 一.常用标签(1).全局篇(包名,版本信息)(2). ...

  7. Git服务器配置及本地克隆提交、服务器获取

    1.服务器Git安装配置 相关链接 相关链接 注意ssh-keygen .修改权限 权限:    相关链接   2.本地获取 git clone name@ip:服务器项目位置 相关链接   3.创建 ...

  8. (网页)jQuery的时间datetime控件在AngularJs中使用实例

    百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder= ...

  9. 数据库的IO and 数据库优化问题

    一.IO介绍 IO有四种类型:连续读,随机读,随机写和连续写,连续读写的IO size通常比较大(128KB-1MB),主要衡量吞吐量,而随机读写的IO size比较小(小于8KB),主要衡量IOPS ...

  10. SpringBoot项目在新电脑上的配置运行，包括JDK+MAVEN+Git+SpringBoot配置等

    该教程记录了我在一台新的电脑上安装IDEA,配置JAVA+MAVEN+GIT+SpringBoot项目的过程,最终完成了项目的运行. 一.若想利用IDEA的git工具从GitHub或者码云上面获取项目 ...