一：定义：

是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二:基本用法

实现页面的两个页面的来回跳转

<div id="app"><div><router-link to="/">首页</router-link><router-link to="/index">为业</router-link></div><div><router-view></router-view></div></div><script src="../es6/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script src="../js/app.js"></script>

html页面

var routes=[{path:'/',component:{template:`<div><h1>首页</h1>
</div>`}},{path:'/index',component:{template:`<div><h1>第二页</h1>
</div>`}}
]var router=new VueRouter({routes:routes
})new Vue({el:'#app',router:router
})

在js页面

三：传参数：

      <router-link to="/user/王华">王华</router-link><router-link to="/user/huahua">huahua</router-link>

{path:'/user/:name',  # 这里用/：分割开要穿的参数component:{template:`<div><h1>我叫：{{$route.params.name}}</h1>  #{{$route.params}}是固定格式后面.name跟的是路径后面的参数
</div>  `}}

js页面

还有一种的根据路径？后面加参数传参。自己了解。

四：子路由,推荐第二种

var routes=[{path:'/user/:name',component:{template:`<div><h1>首页</h1>
<router-link>{{$route.params.name}}<router-link>  #显示传参信息
<router-link :to=" '/user/' +$route.params.name  +'more' "></router-link>
<router-view></router-view>
#这里需要拼接路由，把子路由拼接到全部路由上。
</div>`}children:{path:'more',component:{template:`
<div>
<h1>更多信息</h1>
</div>
`
}}},

js文件中---拼接路径完成子路由

<router-link to="more" append>更多信息</router-link>
在后面加一个append就可以

js文件

PS：第一种要在to前面加上：，第二种则不需要

五：绑定点击事件，执行路径的方法

<input type="button" value="按钮" @click="surf"> #绑定点击时间

new Vue({el:'#app',router:router,methods:{surf:function() {setTimeout(function () {this.router.push('/'),      #把该路径的方法传到router里去setTimeout(function () {this.router.push('/user/huahua')   #再次把路径方法传到里面去})}, 2000)}}
})

js页面

六：命名多个<router-view>

    <router-link to="/lit">first</router-link><router-link to="/lat">second</router-link><div><router-view name="first"></router-view><router-view name="second"></router-view></div>

html页面

var res=[{path:'/lit',component:{first:{                             #这里指定用哪个routes-viewtemplate:`<div><h1>first</h1>
</div>`}}},{path:'/lat',compenent:{second:{                                  #这里用second的routes-viewtemplate:`<h1>second</h1>`}}}
]

js页面

转载于:https://www.cnblogs.com/52forjie/p/8371266.html

Vue-router VUE路由系统相关推荐

Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
vue——router更改路由地址，但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...

Vue-router VUE路由系统

一：定义：

Vue-router VUE路由系统相关推荐

最新文章

热门文章