Vue系列之 => 路由的嵌套
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style> </style> <body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div> <template id="tmp1">
<div>
<h1>这是 Account 组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template> <!-- 子组件 -->
<template id="login">
<div>
<h1>登录一下</h1>
</div>
</template>
<template id="register">
<div>
<h1>注册一下</h1>
</div>
</template> <script>
var login = {
template: '#login'
}; var register = {
template: '#register'
}; var account = {
template: '#tmp1'
}; var routerObj = new VueRouter({
routes: [{
path: '/account',
component: account,
//正确的方法写在children里面
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
}, // 错误方法
// { path : '/account/login' , component : login},
// { path : '/account/register' , component : register},
]
}); var vm = new Vue({
el: '#app',
data: {},
methods: { },
router: routerObj
});
</script>
</body> </html>
Vue系列之 => 路由的嵌套的更多相关文章
- Vue系列之 => 路由匹配
路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- Vue中使用children实现路由的嵌套
Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue中路由的嵌套
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...
- vue.js_11_路由的2中参数传递和路由的嵌套
1.以?的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
随机推荐
- Python3输入输出
Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的形式更加多样, ...
- java面试中被问到的问题
技术面 1) Spring 的注解有哪些? 2) 你如何理解 spring IOC 技术,如果不使用spring,你有哪些方式来加载 bean? 3) spring aop 的原理是什么?它是怎样一 ...
- 【Clojure 基本知识】小技巧s
;;模拟console原位更新输出 ;;空格擦除法,输出空格,是为了擦除短字符串尾部没有占用的位置,因为退格只是回退,并不删除(dotimes [_ 10](let [n (rand) sn (.su ...
- Internet Explorer 已限制此网页运行脚本或ActiveX控件。 允许阻止的内容（A）
打开“Internet选项”->"高级",勾选"允许活动内容在“我的电脑”的文件中运行".重启IE
- gym 101873
题还没补完 以下是牢骚:删了 现在只有六个...太恐怖了,我发现四星场我连300人的题都不会啊. C:最短路加一维状态就好了叭..嗯,一开始没看到输出的那句话 那个 "."也要输 ...
- 原生js的remove方法代表删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ELK之使用filebeat收集系统数据及其他程序并生成可视化图表
当您要面对成百上千.甚至成千上万的服务器.虚拟机和容器生成的日志时,请告别 SSH 吧.Filebeat 将为您提供一种轻量型方法,用于转发和汇总日志与文件,让简单的事情不再繁杂. 1,安装fileb ...
- 二叉查找树，AVL树，伸展树【CH4601普通平衡树】
最近数据结构刚好看到了伸展树,在想这个东西有什么应用,于是顺便学习一下. 二叉查找树(BST),对于树上的任意一个节点,节点的左子树上的关键字都小于这个节点的关键字,节点的右子树上的关键字都大于这个节 ...
- 新版Ubuntu安装日文输入法
在Ubuntu的设置中安装日文输入法 本周在调试书上代码时需要安装日文输入法,我发现在百度上并没有在最新版Ubuntu下安装日文输入法的教程,于是我写了这篇博客来与大家分享一下我的安装过程. a.如图 ...
- POJ 3279 - Fliptile - [状压+暴力枚举]
题目链接:http://poj.org/problem?id=3279 Sample Input 4 4 1 0 0 1 0 1 1 0 0 1 1 0 1 0 0 1 Sample Output 0 ...