vue之路由嵌套,子路由
<!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之路由嵌套,子路由的更多相关文章
- angular2系列教程（十一）路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
- 六、Vue-Router：基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用
一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...
- vue教程3-06 vue路由嵌套(多层路由)，路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue 导航菜单默认子路由
export default new Router({ routes: [ { path: '/', name: 'index', component: index, children: [ { pa ...
- React Router 4.0 ---- 嵌套路由和动态路由
嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...
- [Vue]vue-router嵌套路由(子路由)
总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...
- Vue中使用children实现路由的嵌套
Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue - 子路由-路由嵌套
描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展 ...
- Vue路由嵌套和命名视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MySQL学习（四） SQL连接查询
更多情况下,我们查询的数据来源于多张表,所有有必要了解一下MySQL中的连接查询. SQL中将连接查询分成四类:交叉连接,内连接,外连接和自然连接. 数据准备 student表 -- -------- ...
- Java高级类特性(二)
一.static关键字 static关键字用来声明成员属于类,而不是属于类的对象.1). static (类)变量类变量可以被类的所有对象共享,以便与不共享的成员变量区分开来. static变量也称作 ...
- Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- java程序的加载与执行
1.编写java源文件 .java 2.生成字节码文件 类名.class 3.JRE,java运行环境,包括JVM(java虚拟机).java基本类库 4.
- JavaScript异步和单线程
一,同步和异步的区别: 同步会阻塞代码执行,而异步不会.(比如alert是同步,setTimeout是异步) 二,前端使用异步的场景: 1,定时任务:setTimeout,setInterval 2, ...
- Power BI 与 Azure Analysis Services 的数据关联：4、Power BI 连接到Azure Analysis Services 并展示
Power BI 与 Azure Analysis Services 的数据关联:4.Power BI 连接到Azure Analysis Services 过使用服务器名称别名,用户可以使用较短 ...
- ASP.NET MVC WebAPI 资源整理
注:这是收集给公司同事学习的资料,入门级别的. 使用ASP.Net WebAPI构建REST服务(一)——简单的示例 http://blog.csdn.net/mengzhengjie/article ...
- Lightning框架示例 - 动态建立Lightning组件
动态建立Lightning组件 组件化前端开发是Lightning框架的优点之一.在进行Lightning应用开发时,我们可以将组件进行嵌套.引用,从而实现模块的封装和重用,提高开发效率. 组件的嵌套 ...
- C++ UTF8 UrlEncode（宽字符）
为了支持C++ UrlEncode之后的字符串能够被C#所识别(windows phone 下C#只能支持UTF8与 Unicode). 所谓的 UTF8 UrlEncode 也只是宽字符串 UrlE ...
- 最全的android学习资料
一.开发环境搭建 (已完成) 负责人:kris 状态:已完成 所整理标签为:搭建 SDK JDK NDK Eclipse ADT 模拟器 AVD 调试器(DEBUG) DDMS 测试 日志 Logca ...