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中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- 以前没有写笔记的习惯，现在慢慢的发现及时总结是多么的重要。 这一篇文章主要关于java多线程一些常见的疑惑点。因为讲解多线程的书籍和文章已经很多了，所以我也不好意思多说，嘻嘻嘻、大家可以去参考一些那些书籍。我这个文章主要关于实际的一些问题。同时也算是我以后复习的资料吧，。还请大家多多指教。 同时希望多结交一些技术上的朋友。谢谢。
在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 以下就是我们常见的问题了: 1. 为什么我们不能直接调用run()方法呢? 我的理解是:线程的运行 ...
- Java的第6天，学习运算符
提到运算符我们就会想起 加 减 乘 除: Java中的一些运算符:关系运算符.逻辑运算符.赋值运算符.和条件运算符: 其中算术运算符有:+ , - , * , \, % ,++, -- ; + , - ...
- nginx跳转访问
server { listen 8888; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; ...
- 【RabbitMQ】2、心得总结，资料汇总
Spring AMQP中文文档 http://ju.outofmemory.cn/entry/320538 云栖社区 https://yq.aliyun.com/search?q=rabbitm ...
- 分布式日志框架之ExceptionLess【二】：自行搭建帮助文档【译文】
原文地址:https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting ExceptionLess自行托管环境搭建 一.测试环境 如 ...
- centos7学习笔记-安装后的一些配置
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.允许普通用户使用sudo root用户下运行 visudo 在root ALL=(ALL)ALL下面添加 username ...
- Docker 容器备份例子
# 在 node1 执行 nginx 程序,挂载本地的目录 docker pull nginx:stable-alpine mkdir /data/html echo "hello worl ...
- javascript刷新父页面的各种方法汇总
1.用iframe.弹出子页面刷新父页面iframe <script language=JavaScript> parent.location.reload(); </script& ...
- VMware虚拟机安装教程详解图文
学习Linux系统最好的方式就是在自己的虚拟机上安装Linux:接下来就给大家简单介绍一下VMware虚拟机的安装以及Linux的安装:VMware虚拟机只是为了更好的学习Linux: ...
- [20170909]为什么是12秒.txt
[20170909]为什么是12秒.txt --//在开发程序时我一般会强调开发尽量不要写一些自定义函数,往往可能导致CPU忙.--//例子很像这样: CREATE OR REPLACE FUNCTI ...