11、vue-路由
1、路由:
官方提供一个插件,构建单页面应用,主要实现得功能页面得切换、组件得跳转
2、vue中得路由:vue-router包,如果是脚手架进行搭建得,那么是不需要安装vue-router这个包得,因为里边已经配置安装好了
3、scr中得router文件中的index.js就是直接放路由得文件,所有的路由配置全部都是再这个文件中进行配置的,用的话实在组件中进行使用的
4、不管是使用组件也好,还是使用路由也好,都是需要创建一个组件或者是路由实例的
都需要使用new来完成
import Router from 'vue-router' //引入路由构造器
Vue.use(Router)
export default new Router() //路由实例
5、路由的原理:
根据url的路径变化,从而获取显示对应的组件
通过改变url,再不更新页面的情况下,更新页面中视图
6、vue中的路由实现:
hash模式:根据的是#后的值进行判断的,再读取的时候使用的是window.location.hash进行读取的
特点:hash是再url中的,但是不被包含在http的请求中,hash不会重新加载页面
http://www.xxx.com/#/test(默认是hash模式的)
history模式:把#去掉了,直接再后边显示的是/,再请求的时候是一起进行请求的,但是一般如果要使用的是history模式,那么必要要保证前端
URL和向后台发起的URL一致才行,只有再这种情况下才能请求到数据,否则返回的是404:http://www.xxx.com/test
mode:'history'(有的浏览器是不支持的)
7、使用路由步骤:
现在router配置文件中进行配置
然后再在入口文件中引入路由,其他组件才能使用
使用router-link-->a标签
to:跳转得路径,和path中定义的内容是一致的
name进行跳转,{name:''}
使用router-view标签给vue组件提供跳转的容器
8、如果有二级路由的话:
需要使用children在index.js文件中进行配置的
9、子路由在哪个路径下边,那么我们就需要把router-view放在哪个组件中,否则的话这个子路由是没有办法显示出来的
10、命名视图
一个路由显示多个组件:
components,同时告诉浏览器,哪个组件显示在哪个view中,使用的是name属性来实现的
案例:
// index.js -router import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Nava from '@/components/nava'
import Product from '@/components/product'
import Footer from '@/components/Footera'
import Contenta from '@/components/contenta'
Vue.use(Router) export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
components: {
default:Home,
contenta:Contenta, //命名视图
footer:Footer
}
}, {
path: '/about',
name: 'About',
component: About,
children:[ //子组件路由
{
path:'/about/nava',
name:"nava",
component:Nava
},{
path:'/about/product',
name:"product",
component:Product
}
]
}
]
})
这是App父页面
<template>
<div id='app'>
<ul>
<!-- <li><router-link to="/">首页</router-link></li>
<li><router-link to="/about">abuot</router-link></li> --> //第一种方法
<li><router-link :to="{name:'Home'}">首页</router-link></li> //第二种 :to=“{}”
<li v-navDown><router-link :to="{name:'About'}">abuot</router-link>
<ul>
<li>
<router-link to="/about/nava">NAva</router-link> // 子路由
</li>
<li> <router-link to="/about/product">公司产品</router-link></li> //子路由
</ul>
</li>
</ul>
<router-view name="default"></router-view> //命名视图
<router-view name="contenta"></router-view>
<router-view name="footer"></router-view> </div>
</template> <script>
import $ from 'jquery'
export default {
name: 'App',
data () {
return { }
},
directives:{
'navDown':{
inserted (el) {
el.addEventListener('mouseenter',function(){
$(el).children('ul').slideDown()
})
el.addEventListener('mouseleave',function(){
$(el).children('ul').slideUp()
})
}
}
} } </script> <style>
.test{
color:skyblue;
}
li{
width: 500px;
height: 20px;
background: pink;
}
li ul{
display: none;
}
</style>
//显示子页面
<template>
<div>我是about
<router-view></router-view> //直接显示子页面
</div>
</template>
11、vue-路由的更多相关文章
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
随机推荐
- 转 js自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- mysql事务控制和锁定语句
MySQL 支持对 MyISAM 和 MEMORY 存储引擎的表进行表级锁定,对 BDB 存储引擎的表进行页级锁定,对 InnoDB 存储引擎的表进行行级锁定.默认情况下,表锁和行锁都是自动获得的,不 ...
- Java-LinkedList围圈的人名
import java.util.*; public class Example12_7 { public static void main(String[] args) { int m=5; Lin ...
- NO.5 CCS运行demo(云端)
我们在demo的README中发现如果程序在云端运行会有很酷的界面而且功能会多一些. 首先我们在CCS开始界面点击Resourse Explorer 然后在浏览器中找到对应的demo 打开GUI界面, ...
- [Wireshark]_003_电子邮件抓包分析
电子邮件是我们的生活工作中经常使用的一种服务,用来联系世界各地的朋友,客户.下面我们就用Wireshark对电子邮件进行抓包. 准备工作: 邮件客户端一款(Outlook,Foxmail,KooMai ...
- 接口(interface)的使用
类实现接口就具有接口的功能 实现可以多实现,实现多个接口 package cm.aff.abst; /* 接口(interface)是与类并行的一个概念 1. 接口可以看做是一个特殊的抽象类,是常量与 ...
- Dubbo源码笔记-服务注册
今天来简单做一下Dubbo服务注册部分源码学习手记. 一.Dubbo配置解析 目前Dubbo最多的用法就是跟Spring集成,既然跟Spring集成,那么,Dubbo对象的实例化都将交由Spring统 ...
- (Java实现) 洛谷 P1031 均分纸牌
题目描述 有NN堆纸牌,编号分别为 1,2,-,N1,2,-,N.每堆上有若干张,但纸牌总数必为NN的倍数.可以在任一堆上取若干张纸牌,然后移动. 移牌规则为:在编号为11堆上取的纸牌,只能移到编号为 ...
- (Java实现) 洛谷 P1781 宇宙总统
题目背景 宇宙总统竞选 题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人竞选总统,现在票数已经统计完毕,请你算出谁能够当上总统. 输入输出格式 输入格式: pr ...
- Java实现 LeetCode 523 连续的子数组和(ง •_•)ง
523. 连续的子数组和 给定一个包含非负数的数组和一个目标整数 k,编写一个函数来判断该数组是否含有连续的子数组,其大小至少为 2,总和为 k 的倍数,即总和为 n*k,其中 n 也是一个整数. 示 ...