vue学习路由嵌套
1. 路由嵌套和参数传递
传参的两种形式：
a.查询字符串：login?name=tom&pwd=123
{{$route.query}}
------
<li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
{{$route.query}}
b.rest风格url：regist/alice/456
{{$route.params}}
<li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
{{$route.params}}
c.{{$route.path}}
获取url路径
路由实例
router.push({path:'/home'}) 添加路由，功能上与<route-link>相同
router.replace({path:'/home'}) 替换路由，不产生历史记录
完整示例代码
<!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>
<button @click="push">添加路由</button>
<button @click="push">替换路由</button>
</div>
<template id="user">
<div>
<h1>用户信息</h1>
<ul>
<li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
<li><router-link to="/user/login?name=wushi&pass=123">用户登录</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>登录中....{{$route.query}}</h1>'
};
let regist={
template:"<h1>注册{{$route.params}}{{$route.path}}</h1>"
}
const routes1=[
{path:'/home',component:home},
{path:'/user',component:user,
children:[
{
path: 'login',
component: login,
},
{
path:'regist/:username/:pass',
component:regist
}
]},
// {path:'*',redirect:'/home'}
];
const router = new VueRouter({
routes:routes1,
});
new Vue({
el:'#app',
router,
methods:{
push(){
router.push({path:'/home'})
}
}
})
</script>
</html>
vue学习路由嵌套的更多相关文章
- vue 多级路由嵌套后打开页面是空白
在多层路由嵌套时,一级子目录必须有一个页面并且添加一具<router-view>,否则路由跳转页面为空,没有任何显示 来自为知笔记(Wiz)
- vue.js路由嵌套
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- vue之路由嵌套,子路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js路由嵌套传参
通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）
使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account"> ...
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- C#基础 数据类型 类型转换
本节主要讲解数据类型和各类型之间的转换,两点都是重点,难点在于各种转换的活学活用. 一 数据类型 (一)基本数据类型 1 值类型 (1)整形 int ...
- IDEA出现Cannot resolve symbol "xxx"(无法解析符号)
在导入一些包的时候出现报错 1.File->Invalidate Caches/Restart 清除缓存并重启 idea2.检查pom文件中的依赖关系是否正确3.maven -> Reim ...
- Java并发编程：线程池的使用（转载）
转载自:https://www.cnblogs.com/dolphin0520/p/3932921.html Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实 ...
- Confluence设置MySQL数据库报错：必须使用'READ-COMMITTED'作为默认隔离级别。
解决方案: mysql -u root -p123456 SET GLOBAL tx_isolation='READ-COMMITTED'; mysql数据库创建 1.设置mysql隔离级别 SET ...
- BUGList
Django : a. MySQL数据表还未创建时,不可在视图内直接使用模型类对象,产生报错 django.db.utils.ProgrammingError: (1146, "Table ...
- ImageButton和ImageView设置点击透明区域不响应
思路 ImageView和ImageButton都可以设置background和设置src,两者的区别自行度娘.由于两者的不同,获取它们的图片资源的方法也不同.倘若设置的是background,那么需 ...
- 我的第一个个人博客网站 -> wizzie.top
从去年下半年实习结束,到找到第一个属于自己的工作,我就开始着手搭建自己的网站. 使用阿里云学生服务器,域名,备案解析后,开始设计网站结构和页面布局. 因为临近毕业,网站真的是写的页面怎么多怎么写,所以 ...
- 四元数与欧拉角（RPY角）的相互转换
RPY角与Z-Y-X欧拉角 描述坐标系{B}相对于参考坐标系{A}的姿态有两种方式.第一种是绕固定(参考)坐标轴旋转:假设开始两个坐标系重合,先将{B}绕{A}的X轴旋转$\gamma$,然后绕{A} ...
- [20180606]如何dump数据库里面的汉字.txt
[20180606]如何dump数据库里面的汉字.txt --//链接http://www.itpub.net/thread-2102613-1-2.html的问题. 比如:col 41: [42]e ...
- C++基础学习一（基础之基础）
开篇:做了这么多年的软件,第一次使用博客的方式记录学习过程,之前都是笔记本(都有一摞了),因为之前一直从事的都是.NET的开发工作,对C++知之甚少,但一直想了解C++这门鼻祖级的语言,现在终于下定决 ...