VueRouter基礎

vue路由的注冊

導入

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下載之后的<script src="vue.min.js"></script><script src="vue-router.js"></script>

定義一個匹配規則對象

let url=[{path: "/",component: {template:`<div><h1>組件</h1></div>`}} ]

實例化VueRouter對象，并把匹配規則注冊進去

let router = new VueRouter({routes: url });

把VueRouter實例化對象注冊Vue的根實例中

const app = new Vue({el: "#app",router : router })

在div標簽中直接調用就可以了

<!--4 直接寫router-link標簽就--> <router-link to="/">首頁</router-link> <router-link to="course">課程</router-link> <router-view></router-view>

路由的命名

• 路由的參數name和調用this.$route.params.name

• let url = [{path: "/user/:name",name : 'user',component: {template: `<div><h1>這是{{this.$route.params.name}}頁面</h1></div>`,mounted(){console.log(this.$route)}} }]

• 調用

  <div id="app"><router-link :to="/">主頁</router-link><router-link :to="{name: 'login'}">登陸</router-link><router-link :to="{name: 'user', params: {name: 'ruizhiling'}}">角色</router-link><router-view></router-view> </div>

• 注意to一定動態綁定

手動路由

• 在url中通過寫按鈕的方式對其進行跳轉

路由的參數

• url
• 顯示

路由的鉤子函數

• -- beforeEach(function(to, from, next){to 你要去哪里from 你從哪里來next 你接下來要做什么 }) -- afterEach(function(to, from){to 你要去哪里from 你從哪里來 })

命名的路由視圖

• 一個路由對應多個組件
• div中寫法

Vue的生命周期

• 圖示

  流程圖

  new Vue --> 監聽數據 --> 初始化事件 --> 找el --> template --> 編譯形成虛擬DOM --> 渲染頁面 -- 數據改變重新渲染頁面 -- app.$destroy()

使用router組件流程

下載

npm install vue-router

配置

注冊到vue中

簡單使用

轉載于:https://www.cnblogs.com/yuncong/p/10205726.html

總結

以上是生活随笔為你收集整理的vue路由-router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。