关键词：
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>
11vue-路由(代码片段)
1、路由：官方提供一个插件，构建单页面应用，主要实现得功能页面得切换、组件得跳转2、vue中得路由：vue-router包，如果是脚手架进行搭建得，那么是不需要安装vue-router这个包得，因为里边已经配置安装好了3、scr中得router文... 查看详情
vue路由vueui组件库(代码片段)
欢迎学习交流！！！持续更新中…文章目录Vue路由1.基本使用2.几个注意点3.多级路由（嵌套路由）4.命名路由5.路由参数路由的query参数路由的params参数路由的props配置6.``的replace属性7.编程式路由导航8.缓... 查看详情
vue路由管理(代码片段)
路由管理1.什么是路由？2.Vue-Router3.基本使用4.对象属性5.动态路由6.嵌套路由7.命名视图8.命名路由9.编程式导航10.重定向和别名11.路由组件传参1.什么是路由？生活中的通过路由器功能来完成不同网络之间数据的传递后端... 查看详情
vue路由管理(代码片段)
路由管理1.什么是路由？2.Vue-Router3.基本使用4.对象属性5.动态路由6.嵌套路由7.命名视图8.命名路由9.编程式导航10.重定向和别名11.路由组件传参1.什么是路由？生活中的通过路由器功能来完成不同网络之间数据的传递后端... 查看详情
vue11vuerouterpart1概述&入门(代码片段)
什么是路由？即通过互联网把信息从源地址传输到目的地址的活动路由决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端 后端路由：早起网站开发全部由服务器渲染，例如Java的JSP，.NET的ASP，PHP服务... 查看详情
vue路由(代码片段)
main.js:1、先在项目安装路由模块：npminstallvue-router--save-dev2、使用路由：main.js首先要引用vue模块：importVuefrom‘vue‘3、再引用路由模块： importVueRouterfrom‘vue-router’4、使用VueRouter： Vue.use(VueRouter)5、配置路由： importHo 查看详情
vue嵌套路由（父子路由）(代码片段)
配置父子路由关系，A.vue和B.vue是Main.vue的子组件:path:‘/main/‘,name:‘main‘,component:()=>import(‘components/Main.vue‘),children:[path:‘a‘,name:‘a‘,component:()=>import(‘components/A.vue‘),path:‘b‘,name:‘b‘ 查看详情
vue兼容ie9-11(代码片段)
....0建vue2的项目的时候安装vue-router需要注意版本，不然路由一直报错npmivue-router@ 查看详情
vue路由(代码片段)
route路由单组件路由切换到项目根目录cd安装路由：cnpminstallvue-router--save在main.js里面导入并且配置3.1导入vue-router并注册上```importVueRouterfrom'vue-router';Vue.use(VueRouter);```3.2创建组件，并导入组件```importhomePagefrom'./compo 查看详情
vue专题-路由系统(代码片段)
...合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即Vue路由系统。Vue路由系统VueRouter实现原理VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的，我们来试试不使用VueRouter，自己实现... 查看详情
vue路由vue-router(代码片段)
Vue路由Vue-Router什么是路由VueRouter是Vue官方提供的路由管理器，他和Vue的核心深度集成，让构建单页面应用变得非常简单，通过根据不同的请求路径，切换显示不同组件进行渲染页面。基本路由使用安装路由注意：使用路由首先... 查看详情
vue路由拦截(代码片段)
router.beforeEach((to,from,next)=>//拦截指定路由if(to.path===‘/home‘)//todoelsescrollTo(0,0);next();) 查看详情
vue-路由守卫(代码片段)
importVuefrom‘vue‘importRouterfrom‘vue-router‘importHomefrom‘@/components/Home‘Vue.use(Router)constrouter=newRouter(mode:‘history‘,routes:[path:‘/‘,//name:‘Home‘,//component:Homeredirect:‘/login‘, 查看详情
vue学习笔记——路由配置(代码片段)
1.配置路由在router/index.js文件中对所有的路由信息进行配置。//首先引入vue和vue-routerimportVuefrom‘vue‘importVueRouterfrom‘vue-router‘//使用vue-routerVue.use(VueRouter)//引入待配置的视图组件importFoofrom‘@/views/Foo.vue‘importBarfrom‘@/vie 查看详情
vue进阶知识总结(代码片段)
...用5.getters的使用6.四个map方法的使用7.模块化+命名空间路由1.基本使用2.几个注意点3.多级路由（多级路由）4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.``````的replace属性9.编程式路由... 查看详情
vue进阶知识总结(代码片段)
...用5.getters的使用6.四个map方法的使用7.模块化+命名空间路由1.基本使用2.几个注意点3.多级路由（多级路由）4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.``````的replace属性9.编程式路由... 查看详情
vue学习日记：vue路由搭建(代码片段)
vue路由搭建参考了iview-admin的路由搭建风格。在router文件夹下新建router.js文件，代码如下：importloginfrom‘@/components/login‘;importMainfrom‘@/components/Main‘;//不作为Main组件的子页面展示的页面单独写，如下exportconstloginRouter=path:‘/login... 查看详情
vue入门十路由的使用(代码片段)
...用1、下载npmivue-router-S2、安装插件Vue.use(VueRouter)3、创建路由对象varrouter=newVueRouter()4、配置路由规则router.addRoutes([路由对象])路由对象path:‘锚点‘,component:需要显示的组件5、将配置好的路由对象交给Vue6、使用组件<router-view>&... 查看详情