<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <div id="box">

        <p>

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

            <router-link to="/news">news</router-link>

        </p>

          <router-view></router-view>

    </div>

    <!-- 模板抽离出来 -->

    <template id="home">

        <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->

        <div>

            <h2>首页</h2>

             <router-link to="/home/login">登录</router-link>

            <router-link to="/home/reg">注册</router-link>

            <!-- 路由匹配到的组件将渲染在这里 -->

            <router-view></router-view>

        </div>

    </template>

    <template id="news">

        <div>新闻</div>

    </template>

    <template id="login">

        <div>登录界面</div>

    </template>

    <template id="reg">

        <div>注册界面</div>

    </template>

    <script type="text/javascript">

        // 1. 定义（路由）组件。

        const Home = { template: '#home' };

        const News = { template: '#news' };

        const Login = { template: '#login' };

        const Reg = { template: '#reg' };

        // 2. 定义路由

        const routes = [

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

            {

                path: '/home',

                component: Home,

                children:[

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

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

                ]

            },

            { path: '/news', component: News}

        ]

        // 3. 创建 router 实例，然后传 `routes` 配置

        const router = new VueRouter({

            routes // （缩写）相当于 routes: routes

        })

        // 4. 创建和挂载根实例。

        // 记得要通过 router 配置参数注入路由，

        // 从而让整个应用都有路由功能

        const app = new Vue({

          router

        }).$mount('#box')

        // 现在，应用已经启动了！

    </script>

</body>

</html>

展示结果:

关键点:

vue.js路由嵌套的更多相关文章

  1. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  2. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

  3. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  4. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  5. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  8. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

随机推荐

  1. 空中楼阁 ( House )最短路

    题目描述: 话说Z4阴差阳错地来到了神秘岛.不久,他们发现,这是一个由n个小岛和一个中心岛组成的群岛,群岛之间有m座桥.令他们感到惊讶的是,这些桥并不是固定不变的,经较长时间的观察,发现它们会随时间作 ...

  2. windows配置apache tomcat 集群

      1,安装包 httpd-2.2.22-win32-x86-no_ssl.msi 两个tomcat6 2,配置apachehttpd---配置的过程中有错误可以查看logs文件夹下的log文件进行排 ...

  3. HotSpotVM创建过程（JNI_CreateJavaVM）详解

    来自:<Java Performance>第3章 JVM Overview The HotSpot VM's implementation of the JNI_CreateJavaVM ...

  4. linux环境下Apache+Tomcat集群配置

    写在前面 apache配置多个tomcat,实现请求分流,多个tomcat服务均衡负载,增加服务的可靠性.最近研究了一下,遇到许多问题,记录一下,方便以后查阅,不喜欢apache,nginx也是可以做 ...

  5. flask 电影系统（2）

    标签,电影,上映预告数据模型设计 标签数据类型 id:编号 name:标题 movies:电影外键关联 addtime:创建时间 定义电影数据模型 id:编号 title:电影标题 url:电影地址 ...

  6. 经典的CSS代码（转）

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3 ...

  7. css知多少（5）——选择器（转）

    css知多少(5)——选择器   1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得 ...

  8. 吐槽下linq to sql的分页功能

    在调试程序的时候发现一个非常奇怪的问题: 用使用linq分页,分页到第二页的时候,第二页里面有第一页里出现的数据,开始还以为是. linq语句写的有问题,调试半天,无解.后来发现是因为没有排序的缘故. ...

  9. Switch/Case 的穿透性

    /*键盘录入1到12 ,对应输出该月份对应的季节 .如果输入的不是1到12,输出提示信息:您输入的数据有误. PS: 春季:3,4,5月份 夏季: 6,7,8月份 秋季: 9,10,11月份 冬季:1 ...

  10. function几种自执行的形式

    1.(function(){})();这种是最常用的形式 2.var t = function(){}(); 3.-function(){}(); 这三种形式都能自执行