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-路由的更多相关文章

  1. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  2. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  3. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  4. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  5. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  6. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  7. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  8. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  9. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  10. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

随机推荐

  1. 人机协同与AI能力训练

    我们进行<中台战略>一书的第三期分享. “人机融合是解决aI机器人冷启动的绝佳解决方案,我们这里引入了一个应答满意度的指标,每一个咨询应答都对应一个应答满意度.当消费者应该回答选择转入人工 ...

  2. Springboot整合MybatisPlus(超详细)完整教程~

    新建springboot项目 开发工具:idea2019.2,maven3 pom.xml <dependency> <groupId>org.springframework. ...

  3. 剑指offer——数据结构

    技术面重点:数组.字符串.链表.树.栈以及队列.

  4. Linux学习(二):makefile

    编译命令: gcc -o exefile src.c (将src.c编译,链接为exefile可执行文件) gcc -o obj.o -c src.c (将src.c编译为obj.o目标文件) mak ...

  5. Docker 入门:Dockerfile

    主要内容: 什么是 Dockerfile 查看 DockerHub 中镜像的 Dockerfile Dockerfile 编写 Dockerfile 常用命令 什么是 Dockerfile 使用 Do ...

  6. TCP 半连接队列和全连接队列满了会发生什么?又该如何应对?

    前言 网上许多博客针对增大 TCP 半连接队列和全连接队列的方式如下: 增大 TCP 半连接队列的方式是增大 /proc/sys/net/ipv4/tcp_max_syn_backlog: 增大 TC ...

  7. 485通信——驱动 MX64/MX28 舵机

    背景:在使用STM32调试MX64舵机时,由于控制该舵机需要采用RS485通信协议,因此需要从单片机的串口经过一个TTL转485通信的模块再与舵机进行通信. 485通信特点: 485通信采用差分信号: ...

  8. Rocket - diplomacy - enumerateMask

    https://mp.weixin.qq.com/s/s3hr5JJX2_pwNgdu8WqV0Q   介绍enumerateMask的实现.(仅供理解,非严谨证明)   ​​   1. 基本定义   ...

  9. 企业级Python开发大佬利用网络爬虫技术实现自动发送天气预告邮件

    前天小编带大家利用Python网络爬虫采集了天气网的实时信息,今天小编带大家更进一步,将采集到的天气信息直接发送到邮箱,带大家一起嗨~~拓展来说,这个功能放在企业级角度来看,只要我们拥有客户的邮箱,之 ...

  10. Java实现 LeetCode 51 N皇后

    51. N皇后 n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题的解决 ...