Vue 路由的嵌套使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head> <body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div> <template id="tmpl">
<div>
<h1>这是 Account 组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template> <script> // 组件的模板对象
var account = {
template: '#tmpl'
} var login = {
template: '<h3>这个是子路由里的登录</h3>'
} var register = {
template: '<h3>这个是子路由里的注册</h3>'
} var router = new VueRouter({
routes: [
{
path: '/account',component: account,
// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
// 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
// { path: '/account/login', component: login },
// { path: '/account/register', component: register }
]
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body> </html>
Vue 路由的嵌套使用的更多相关文章
- Vue 路由的嵌套
1.配置路由 const routes = [ { path: '/User', component: User, children: [{ path: 'OP1', component: OP1 } ...
- Vue中使用children实现路由的嵌套
Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...
- Vue中路由的嵌套
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...
- Vue路由嵌套
Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router -->children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...
- Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）
使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account"> ...
- vue.js_11_路由的2中参数传递和路由的嵌套
1.以?的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...
- vue 路由缓存 路由嵌套 路由守卫 监听物理返回
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
随机推荐
- 客户端用javascript填充Dropdownlist，服务器端获取不到Dropdownlist的值
今天遇到一个奇怪的问题,某一页面需要使用三级级联下拉列表框.为提高用户体验,采用jQuery的cascadingDropDown插件调用后台Web Services来实现ajax填充. 填充没有任何问 ...
- 杨柳絮-Info：阜阳市多举措治理杨柳絮问题
ylbtech-杨柳絮-Info:阜阳市多举措治理杨柳絮问题 1.返回顶部 1. 阜阳市多举措治理杨柳絮问题 2019-4-15 10:34| 发布者: 戴斐 | 查看: 56407| 评论: 0|原 ...
- 电脑上做的ppt拿到别的电脑或手机上播放的时候字体错位的解决方法
原因:字体不对!!! 比如你英文用的Calibri字体,但是手机的wps或者别的电脑上的低版本的office没有这个字体,所以就会强制转换成那里有的字体(一般是黑体),此时字体就会错位!! 不要以为那 ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- JSP Web第三章整理复习 开发环境搭建
P86 WEB工作原理 用户使用浏览器通过HTTP协议请求服务器上的Web资源,服务器接收到该请求后,读取请求的URI所标识的资源,加上其他资源发送给客户端的浏览器,浏览器解析响应中的HTML数据, ...
- Leetcode859.Buddy Strings亲密字符串
给定两个由小写字母构成的字符串 A 和 B ,只要我们可以通过交换 A 中的两个字母得到与 B 相等的结果,就返回 true :否则返回 false . 示例 1: 输入: A = "ab& ...
- input输入框限制录入类型
输入大小写字母.数字.下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g ...
- PHPCMS快速建站系列之pc:get标签的应用
GET标签使用方式如下: {pc:get sql="SELECT * FROM phpcms_member" cache="3600" page="$ ...
- bzoj2752 高速公路
列式子: 如果把从i号收费站到i+1号收费站之间路段编号设为i. 假如查询l号收费站到r号收费站之间的期望值. $ Ans_{l,r} = \sum\limits_{i=l}^{r-1} v_i ...
- Django Rest Framework Serializer的简单使用
1.RESTful 1.1 定义 REST(Representational State Transfer)与技术无关,代表一种软件架构风格,中文为表征状态转移. 1.2 RESTful API设计 ...