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. 「持续集成实践系列」Jenkins 2.x 搭建CI需要掌握的硬核要点

    1. 前言 随着互联网软件行业快速发展,为了抢占市场先机,企业不得不持续提高软件的交付效率.特别是现在国内越来越多企业已经在逐步引入DevOps研发模式的变迁,在这些背景催促之下,对于企业研发团队所需 ...

  2. [json-server] RESTful API 中,取主数据时,同时获取多个关联子表的数据

    项目背景: back-end:ASP.NET Core WebAPI front-end:Vue(+vue-router +vuex +axios)(webpack)(json-server + mo ...

  3. 化学元素周期表的英文全称 Periodic Table of the Elements

    化学元素周期表的英文全称 Periodic Table of the Elements   缩写 PTE 拉丁文 英文 1 H 氢 Hydrogenium Hydrogen 2 He 氦 Helium ...

  4. eatwhatApp开发实战(四)

    之前我们做了添加店铺了功能,接下来我们做删除功能,并介绍对话框的使用方法. 在init()中注册listview的item点击监听 //注册监听 shop_lv.setOnItemClickListe ...

  5. [PHP学习教程 - 系统]004.通过ini_set()来设置系统属性(ini_set Method)

    PHP原意:ini_set — 为一个系统配置项设置值 基本信息: string ini_set ( string $varname , string $newvalue). (说明:设置指定配置选项 ...

  6. [Python基础]009.os模块(1)

    os模块(1) 介绍 os 常量 文件目录操作 文件属性操作 遍历文件夹 介绍 os模块是系统服务应用程序接口,是Python最常用的模块之一. os模块包含了对文件和文件夹的操作,操作系统相关的操作 ...

  7. Java实现 蓝桥杯VIP 算法提高 选择排序

    算法提高 选择排序 时间限制:1.0s 内存限制:256.0MB  选择排序 问题描述 排序,顾名思义,是将若干个元素按其大小关系排出一个顺序.形式化描述如下:有n个元素a[1],a[2],-,a[ ...

  8. Java实现 LeetCode 38 外观数列

    38. 外观数列 「外观数列」是一个整数序列,从数字 1 开始,序列中的每一项都是对前一项的描述.前五项如下: 1 11 21 1211 111221 1 被读作 "one 1" ...

  9. java实现低碳生活大奖赛

    某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答 10 个问题(其编号为 1 到 10),越后面越有难度. 答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必须回答问题 ...

  10. Java实现 蓝桥杯 历届试题 剪格子

    问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |10* 1|52| +--****--+ |20|30* 1| *******--+ | 1| 2| 3| +--+ ...