?

一：定義：

是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。

二:基本用法

實(shí)現(xiàn)頁面的兩個(gè)頁面的來回跳轉(zhuǎn)

<div id="app"><div><router-link to="/">首頁</router-link><router-link to="/index">為業(yè)</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頁面

?

三：傳參數(shù)：

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

?

?

{path:'/user/:name', # 這里用/：分割開要穿的參數(shù)component:{template:`<div><h1>我叫：{{$route.params.name}}</h1> #{{$route.params}}是固定格式后面.name跟的是路徑后面的參數(shù) </div> `}} js頁面

還有一種的根據(jù)路徑？后面加參數(shù)傳參。自己了解。

?

四：子路由,推薦第二種

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> 在后面加一個(gè)append就可以 js文件

PS：第一種要在to前面加上 ：，第二種則不需要

?

五：綁定點(diǎn)擊事件，執(zhí)行路徑的方法

<input type="button" value="按鈕" @click="surf"> #綁定點(diǎn)擊時(shí)間 new Vue({el:'#app',router:router,methods:{surf:function() {setTimeout(function () {this.router.push('/'), #把該路徑的方法傳到router里去setTimeout(function () {this.router.push('/user/huahua') #再次把路徑方法傳到里面去})}, 2000)}} }) js頁面

?

六：命名多個(gè)<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:{ #這里指定用哪個(gè)routes-viewtemplate:`<div><h1>first</h1> </div>`}}},{path:'/lat',compenent:{second:{ #這里用second的routes-viewtemplate:`<h1>second</h1>`}}} ] js頁面

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/52forjie/p/8371266.html

總結(jié)

以上是生活随笔為你收集整理的Vue-router VUE路由系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。