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>

路由传参的第二种方式:

<!-- 注:路由传参-使用params方式传递参数 -->
 <!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路由学习总结的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. vue.js路由学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  4. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  5. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  6. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. vue router路由跳转了,但是页面没有变(已解决)

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

  10. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

随机推荐

  1. IAR 关于C++几个内存的使用及释放的问题

    由于之前工作中常常遇到,但是遇到的时候工作总是要求比较紧急,没有那么多时间细细寻找有效的解决办法.现在了解到了一些,记录一些. 1. string vector 都是增量在堆里,所以只要有增量都是在堆 ...

  2. java学习笔记05-运算符

    算数运算符 +:相加 -:相减 *:相乘 /:相除 %:取余 ++:自增 --:自减 public static void main(String[] args) { int i = 10; int ...

  3. 结合jira搭建自动化测试平台

    mysql 语句查看 python manage.py sqlmigrate your_app_name 0001 代码如下 #coding=utf8 #https://jira.readthedoc ...

  4. Java中的String、StringBuilder以及StringBuffer

    https://www.cnblogs.com/dolphin0520/p/3778589.html

  5. java8---lambda表达式

    语法糖 lambda表达式允许你通过表达式来代替功能接口. lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体(body,可以是一个表达式或一个代码块).Lambda表 ...

  6. JAVA第三次实训作业

    ---恢复内容开始--- 1. 编写“学生”类及其测试类. “学生”类: 类名:Student 属性:姓名.性别.年龄.学号.5门课程的成绩 方法1:在控制台输出各个属性的值. 方法2:计算平均成绩 ...

  7. spring-cloud-zuul服务网关

    Zuul包含了对请求的路由和过滤两个最主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础,类似于保安的职能,而过滤器功能则负责对请求的处理过程进行干预,是实 ...

  8. elment-ui中 修改el-table表头的颜色

    可以直接在table上添加: :header-cell-style="{background:'#f5f7fa'}" 也可以使用绑定方法来修改 :header-cell-style ...

  9. CentOS7各个版本镜像下载地址

    # CentOS7.6 下载地址 # CentOS-7-x86_64-DVD-1810.iso CentOS 7.6 DVD 版 4G http://mirrors.163.com/centos/7. ...

  10. elsticsearch在kibanna中的操作

    #建立索引 PUT /es_note_tel{ "settings": { "number_of_shards": 1 }, "mappings&qu ...