一、html頁面中如何使用

1、引入 vue-router.js

2、安裝外掛

Vue.use(VueRouter)

3、建立路由物件

　　var router = new VueRouter({

　　　　// 4、配置路由

　　　　routes:[{

　　　　　　path:'/login',

　　　　　　component:Login  //跳轉到Login元件,所以先建立Login元件

　　　　}]

　　})

建立Login元件

var Login = {template:'<div>我是登陸頁面</div>'}

5、將配置好的路由關聯到vue例項中

new Vue({

　　el:'',

　　components:{

　　　　'app':App

　　},

　　router:router//將上面步驟中建立的router物件引入進來，不引入報undifined 物件取不到mached錯誤

})

6、指定路由改變區域性的位置

var  App={

　　template:'

　　　　<div>

　　　　　　<router-view></router-view>  //留坑，待目標地址內容填充

　　　　</div>

　　'

}

 二、路由內建元件router-link

用法 <rouoter-link to='/login'>登陸去</router-link>

如果路由規則中新增name屬性，例如 {name:'login',path:'/login',component:Login}

則router-link可以通過名稱找物件，獲取path，用法   <rouoter-link :to="{name:'login'}">登陸去</router-link>

三、router引數獲取

 方式一 query方式

 <rouoter-link to='/login' query={id:1}>登陸去</router-link>  

路由配置路徑為 （即路由規則） {name:'login',path:'/login',component:Login}

獲取this.$route.query.id

生成的瀏覽器路徑為 login?id=1

方式二 params方式

 <rouoter-link to='/login' params={id:1}>登陸去</router-link>

路由配置路徑也就是路由規則為  {name:'login',path:'/login/:id',component:Login}

獲取方式this.$route.params.id

生成的瀏覽器路徑為 login/id

兩種方式相比較，params的方式需要在路由規則也就是路徑中配置。

四、$router 與 $route的區別

兩者都是vue-router的內建物件，$route是路由資訊物件，只讀物件。 $router是路由操作物件，只寫物件。

五、巢狀路由

多個元件，按照不同錨點值部分，嵌入不同的坑。

即<router-view></router-view>中包含<router-view></router-view>

例子：將上面的Login元件使用router-view留坑

var Login = {template:'<div><router-view></router-view></div>'} 則對應的路由規則配置children屬性，變為如下格式：

{name:'login',path:'/login',component:Login，children:[{name:'test',path:'/test',component:ChildrenCom}]}  //path可以寫成/test也可以只寫test,只是瀏覽器展示路徑不同而已

路由其他介紹：

1、路由meta元資料

meta是對於路由規則是否需要驗證許可權的配置。 meta屬性於name同級  meta：{ischecked:true}

2、路由鉤子

 許可權控制的函式執行時期。路由匹配後，渲染到router-view之前，用法 router.beforeEach(function(to,from,next){})  //最後next()代表同行，不呼叫會卡住 next(false)代表取消導航  next({name:''})重定向

3、路由規則除了在上述new VueRouter是指定routers，還可以物件動態新增路由。 router.addRoutes([........])

4、路由規則可以配置重定向路徑

 {name:'login',path:'/login',redirect:{name:''}}

5、其他

a、跳到指定錨點  this.$router.push()

b、根據歷史記錄前進或者後退

this.$router.go(-1|1)

1代表前進  -1後退

注意：一個檢視使用一個元件渲染，多個檢視需要多個元件，所以需要在路由規則的component改完components

例如

<router-view ></router-view>

<router-view name='a'></router-view>

<router-view name='b'></router-view>

規則配置應該為：

{name:'shouye',path:'/',components:{default:Header,a:Body,b:Footer}}

注：git上有開發的專案作為例子，有興趣的可以下載學習。原始碼已上傳git：Git地址，也可以掃碼加入QQ交流群

&n