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 ...
随机推荐
- C# 分支语句 练习题（中间变量，随机数）
练习一 请输入年份:”(1-9999),请输入月份:”(1-12),请输入日期(要判断大小月,判断闰年),判断输入的时间日期是否正确. 计算输入的时间是当前这一年的第几天. bool dateISOK ...
- Python入门到精通学习书籍推荐！
1.Python基础教程(第2版 修订版)<Python基础教程(第2版修订版)>包括Python程序设计的方方面面,内容涉及的范围较广,既能为初学者夯实基础,又能帮助程序员提升技能,适合 ...
- C# 填充Excel
1.添加引用 Microsoft.Office.Interop.Excel; 2.使用命名空间 using Microsoft.Office.Interop.Excel; 3.填充EXCEL单元格方法 ...
- Linux环境变量详解与应用
在bash shell中,环境变量分为: >全局变量 >局部变量 全局变量,不仅对shell可见,对其子进程也可见 查看预设的全局环境变量: ghostwu@dev:~$ printenv ...
- 前端面试(原生js篇) - 精确运算
一.面试题 问:开发的时候有用到过 Math 吗? 答:很多啊.比如生成 GUID 的时候,就会用到 Math.random() 来生成随机数. 问:别的呢?比如向下取整.向上取整? 答:向下取整是 ...
- ES 5 中 判断数组的方法
源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Python 字符编码简记
名称 说明 ASCII 只能存英文和拉丁字符,一个字符占一个字节,8位. ASCII 码是不支持中文的,支持中文的第一张表是 GB2312 GB2312 支持中文,收录了 7445个字符 GBK1.0 ...
- Linux常用系统命令
致歉:各位看到此博客的朋友们 因为命令的数量挺多的很多命令也都很简单 我就总结了一下具体的命令和这个命令是做什么的,主要的使用方法是链接到http://man.linuxde.net/的网站的,请各 ...
- EventBus结合rxjava2和retrofit2网络获取
依赖: compile 'com.squareup.retrofit2:converter-gson:2.3.0'compile 'com.squareup.retrofit2:retrofit:2. ...
- wap2app（三）-- 添加引导页
1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...