vue-router路由学习总结
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="vue.js"></script>
<script src="vue-router.js"></script>
<!-- <script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.js"></script> -->
<style>
/* 设置选中路由高亮的方式 1*/
.router-link-active{
color: red;
font-weight: 800;
font-style: initial;
font-size: 80px;
text-decoration: underline
}
.myactive{
color: blue;
font-weight: 800;
font-style: initial;
font-size: 80px;
text-decoration: underline
}
/* 动画 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个router-view中去 -->
<!-- 所以我们可以把它当作占位符 -->
<!-- <a href="#/login">登录</a>
<a href="#/register">注册</a> -->
<!-- router-link默认渲染一个a标签 -->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register" >注册</router-link>
<!-- Vue动画使用transition 标签把router-view包裹起来 -->
<transition mode="out-in">
<router-view> </router-view>
</transition>
</div> <script>
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
// <!-- 创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做vuerouter -->
var routerObj=new VueRouter({
// route//这个配置中的route表示【路由匹配规则】
routes:[
// 每个路由规则都是一个对象，这个规则对象，身上，有两个必须的属性
// 属性1是path，表示监听哪个路由链接地址
// 属性2是component,表示,如果路由是前面匹配到的path，则表示component属性对应哪个组件
// 注意：component的属性值，必须是一个组件的模板对象 ，不能是组件的引用名称
// 指定根路径,重定向
{path:'/',redirect: '/login'},
{ path: '/login', component: login },
{ path: '/register', component: register }
],
/* 设置选中路由高亮的方式 29*/
linkActiveClass:'myactive'
})
var vm=new Vue({
el:'#app',
data:{ },
methods: { },
router:routerObj//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 })
</script>
</body>
</html>
路由传参的方式
方式一路由传参-使用query方式传递参数
<!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>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
<!-- 注：路由传参-使用query方式传递参数 -->
<div id="app">
<!-- 如果在路由中，使用 -->
<router-link to="/login?id=10&name=zs" tag="span">登录</router-link>
<router-link to="/register" >注册</router-link>
<router-view> </router-view>
</div>
<script>
var login={
template:'<h1>登录---{{$route.query.id}}---{{$route.query.name}}</h1>',
created () {
// 组件的生命周期钩子函数
console.log(this.$route)
// 这里的this指向组件的实列
console.log(this.$route.query.id)
}
}
var register={
template:'<h1>注册</h1>'
}
var router=new VueRouter({
routes:[
{ path: '/login', component: login },
{ path: '/register', component: register }
]
})
var vm=new Vue({
el:'#app',
data:{},
methods: { },
router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件
})
</script>
</body>
</html>
路由传参的第二种方式：
<!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>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
<!-- 注：路由传参-使用params方式传递参数 -->
<div id="app">
<!-- 如果在路由中，使用 -->
<router-link to="/login/10/is" >登录</router-link>
<router-link to="/register" >注册</router-link>
<router-view> </router-view>
</div>
<script>
var login={
template:'<h1>登录----{{this.$route.params.id}}---{{$route.params.name}}</h1>',
created () {
console.log(this);
console.log(this.$route);
console.log(this.$route.params.id);
console.log(this.$route.params.name); }
}
var register={
template:'<h1>注册</h1>'
}
var router=new VueRouter({
routes:[
{ path: '/login/:id/:name', component: login },
{ path: '/register', component: register }
]
})
var vm=new Vue({
el:'#app',
data:{},
methods: { },
router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件
})
</script>
</body>
</html>
路由的嵌套
使用children属性实现路由
<!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>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
<!-- 注：路由传参-使用params方式传递参数 -->
<div id="app">
<!-- 如果在路由中，使用 -->
<!-- <router-link to="/login/10/is" >登录</router-link>
<router-link to="/register" >注册</router-link> -->
<router-link to="/account">Accout</router-link>
<router-view> </router-view>
</div>
<template id="tmp1">
<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:'#tmp1', }
var login={
template:'<h1>登录</h1>',
}
var register={
template:'<h1>注册</h1>'
}
var router=new VueRouter({
routes:[
{
path: '/account',
component: account,
// 使用children属性实现子路由时。子路由的path前面不能带/ ,否则永远以根路径开始请求，
// 这样不方便用户去理解url的地址 children:[
// { path: '/login', component: login },
{ path: 'login', component: login },
{ path: 'register', component: register }
] }, ]
})
var vm=new Vue({
el:'#app',
data:{},
methods: { },
router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件
})
</script>
</body>
</html>
vue-router路由学习总结的更多相关文章
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫：完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue router路由跳转了，但是页面没有变（已解决）
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
随机推荐
- ansible-plabybook 常用的有用的命令
ansible-plabybook 常用的有用的命令 ansible-playbook常用的非常有用的参数有: -C ,大写c ,这个命令的意思就是模拟执行,会告诉你跑完这个playbook会发生什么 ...
- 使用Jenkins部署asp.net core
首先盗图一张 1.在Github上创建一个测试仓库 2.创建基于Asp.net Core的MVC项目 运行解决方案,验证代码没有问题,然后将代码迁入Github 3.添加Docker支持 项目--&g ...
- Salesforce知识整理（一）之Lightning Web Component Tools
目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...
- 手把手详解持续集成之GitLab CI/CD
一.环境准备 首先需要有一台 GitLab 服务器,然后需要有个项目:这里示例项目以 Spring Boot 项目为例,然后最好有一台专门用来 Build 的机器,实际生产中如果 Build 任务不频 ...
- 面向对象之组合VS继承：继承过时了？
在阅读Effective Java中的第16条时发现了一个有趣的机制或者说是模式,那就是组合(文中翻译为复用,但是作者认为组合更能体现这种模式的精神),并且文中建议使用组合. 那什么是组合, ...
- 使用 Xtrabackup 部署 MySQL 从库
数据库备份和恢复是数据库管理工作中非常重要的一个部分. 笔者常用的两个备份工具是mysqldump (逻辑备份)和 Xtrabackup (物理备份). 对于前者一般是用在凌晨的业务低峰期的定时任务中 ...
- SP283 NAPTIME - Naptime
SP283 NAPTIME - Naptime 题意: 在某个星球上,一天由N小时构成.我们称0-1点为第一个小时,1-2点为第二个小时,以此类推.在第i个小时睡觉能恢复Ui点体力.在这座星球上住着一 ...
- 导出pip安装的所有放入一个文件中，并把通过这个安装所有的包
导出pip安装的所有的包: pip freeze > piplist.txt 在新的环境中安装导出的包 pip install -r piplist.txt
- 【算法】Bert预训练源码阅读
Bert预训练源码 主要代码 地址:https://github.com/google-research/bert create_pretraning_data.py:原始文件转换为训练数据格式 to ...
- c程序内存模型
这篇文章主要记录一下c程序运行时内存空间如何使用.(摘抄自网络) 在一个多任务操作系统中的每个进程都运行在它自己的内存“沙箱”中.这个沙箱是一个虚拟地址空间(virtual address space ...