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 ...
随机推荐
- 51nod 2513
写代码的时候抄错变量,晕! 另外有个while循环条件错的,因为两个指针必须都要有终止条件 代码: #include<iostream> #include<cstdio> #i ...
- httpclient的封装完整版
applicationContext-httpclient.xml <?xml version="1.0" encoding="UTF-8"?> & ...
- win10遇见的问题
所有问题的终极解决办法:系统重置 1.Windows PowerShell打不开,重装.net framework装不上 电脑系统为win10企业版,今天第n遍安装sql server 2017的时候 ...
- ansible的modules
fetch :从远端服务器拉取文件到本地 dest 依赖 本地存放拉取到的文件路径, 如果flat=yes,则会在该路径下直接存放文件, 如果flat=no,则会在该路径下生成每个服务器的in ...
- ansible安装 使用 介绍
1.介绍安装 a.介绍 Ansible:—基于 Python paramiko 开发,分布式,无需客户端,轻量级,配置语法使用 YMAL 及 Jinja2模板语言,更强的远程命令执行操作. b.安装 ...
- How does rt.jar works?
转载自:https://stackoverflow.com/questions/30222702/how-does-java-link-lib-rt-jar-to-your-app-at-runtim ...
- selenium爬取煎蛋网
selenium爬取煎蛋网 直接上代码 from selenium import webdriver from selenium.webdriver.support.ui import WebDriv ...
- restful规范简要概述
在 RESTful 架构概念详解 中聊了一些概念和约束, 本篇主要简要的聊一聊 RESTful API 规范概要设计, 内容源自 阮一峰老师的博客 一. 协议(protocol) 服务端的 API 与 ...
- Ubuntu 16.04.3 LTS u盘-安裝教程（填坑）
Ubuntu 16.04.3 LTS 下载地址: https://www.ubuntu.com/download/desktop 下载u盘后文件为iso,可以选择UltraISO制作U盘启动,也可以直 ...
- Linux-day1-pdf课件
1.掌握Linux目录结构 2.掌握基础文件操作指令 3.vim常用操作命令 4.Linux用户和组