<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue2.0学习笔记之路由（二）路由嵌套</title>

</head>

<body>

    <div id="app">

        <div>

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

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

        </div>

        <div>

            <router-view></router-view>

        </div>

    </div>

</body>

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

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

<script>

    // 定义组件

    var Home = {

        template:"<h3>主页内容</h3>"

    }

    var User = {

        template:`

            <div>

                <h3>用户中心</h3>

                <ul>

                    <li><router-link to="user/userinfo">查看个人信息</router-link></li>

                </ul>

                <div>

                    <router-view></router-view>

                </div>

            </div>

        `

    }

    var UserDetail = {

        template:"<h4>个人信息</h4>"

    }

    // 配置路由

    const routes = [

        { path:"/home", component:Home },

        {

            path:"/user",

            component:User,

            children:[  // 配置子路由

                { path:"userinfo",component:UserDetail }

            ]

        },

        { path:"*", redirect:"/home" } // 重定向让页面加载即显示Home

    ]

    // 生成路由实例

    const router = new VueRouter({

        routes

    })

    // 挂载到vue实例上

    new Vue({

        el:"#app",

        router

    })

</script>

vue2.0学习笔记之路由（二）路由嵌套的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套+动画

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

  2. Vue2.0学习笔记一 ：各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  3. vue2.x学习笔记（十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...

  4. Netty4.0学习笔记系列之二：Handler的执行顺序（转）

    http://blog.csdn.net/u013252773/article/details/21195593 Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet ...

  5. vue2.0学习笔记之组件

    [易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局 ...

  6. Netty4.0学习笔记系列之二：Handler的执行顺序

    Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet中的filter很像,通过Handler可以完成通讯报文的解码编码.拦截指定的报文.统一对日志错误进行处理.统一对 ...

  7. USB2.0学习笔记连载（二）：USB基础知识简介

    USB接口分为USB A型.USB B型.USBmini型.USBmicro型.USB3.0其中每种都有相应的插座和插头. 图1 图2 上图是USBA型接口,图1为插座,图2为插头.插座指向下行方向, ...

  8. vue2.0学习笔记（第八讲）（vue-cli的使用）

    vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...

  9. Vue2.0学习笔记

    环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...

随机推荐

  1. windows下使用python操作redis(Visual Studio Code)

    1.编辑工具: Visual Studio Code(windows环境) 2.redis服务器:这里用了远程连接,需要配置redis.conf. (1)注释 #bind 127.0.0.1 (2)设 ...

  2. EF批量操作数据与缓存扩展框架

    前言 在原生的EF框架中,针对批量数据操作的接口有限,EF扩展框架弥补了EF在批量操作时的接口,这些批量操作包括:批量修改.批量查询.批量删除和数据缓存,如果您想在EF中更方便的批量操作数据,这个扩展 ...

  3. 10.C#知识点:操作XML

    知识点目录==========>传送门 XML是什么就不用说了文本标记语言. 主要纪录如何对XML文件进行增删改查. Xml的操作类都存在System.xml命名空间下面. 应用型的直接上代码 ...

  4. Collection集合的带All功能的测试

    public class Demo4_CollectionAll { public static void main(String[] args) { // Demo1(); // Demo2(); ...

  5. sqlserver--install/uninstall

    2017 express版本 安装: https://jingyan.baidu.com/article/76a7e409077997fc3a6e1559.html https://www.cnblo ...

  6. Java - "JUC" CyclicBarrier源码分析

    Java多线程系列--“JUC锁”10之 CyclicBarrier原理和示例 CyclicBarrier简介 CyclicBarrier是一个同步辅助类,允许一组线程互相等待,直到到达某个公共屏障点 ...

  7. Three.js开发指南---创建，加载高级网格和几何体（第八章）

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...

  8. 使用openpyxl模块将Excel中的数据导入数据库

    这里将不介绍openpyxl模块的详细操作. 主要就是记录一个使用openpyxl模块将Excel表格的数据导入数据库中的实例. from openpyxl import load_workbook ...

  9. SD从零开始15-18

    SD从零开始15 税(Taxes) 税确定的标准Criteria for tax determination 你可以在sales organization level分配一个rule(blank,A, ...

  10. Salesforce中如何删除调试日志

    大家在新建一个用户跟踪标记的时候可能会遇到以下报错:调试日志已经超过了上限,在编辑跟踪标志前,删除一些调试日志.但是在点击“全部删除”按钮删除所有可见的日志后,还是报同样的错误,这时候,我们打开开发者 ...