Vue---router
router的作用就不贅述了
主要講講Vue中是怎麽使用router以及註意事項
路由的簡單使用
1.引入路由
使用router，要用到官方的庫 vue-router 引入vue-router有2種方式：a.模塊加載的方式 b.script標簽引入
模塊加載：
import Vue from "vue"; import VueRouter from ‘vue-router‘; //實例化Vue之前，一定要有這一句代碼 Vue.use(VueRouter); new Vue({ //code
})
一定要按照以上方式嚴格書寫（套路） Vue..use是vue的全局方法，用於引入vue相關的插件
script標簽引入
這個沒什麽好說的，但註意加載順序：先vue.js 再 vue-router.js 否則會錯 （凡是引入vue插件前,先要引入vue.js）
2.定義組件
<script>
var Template = {
template:"<p>你好<p>"
}
</script>
3.定義路由
var routers = newVueRouter({ routes:[ { path:"/foo", component:firstCpt } ] })
跟創建Vue實例類似（據我觀察，好像所有的veu插件都是 new一個實例，然後掛載到vue實例上） 註意routes選項，很容易寫成“routers” 該選項有兩個2參數：path 指定路由“跳轉地址” component指定加載的組件。
4.註入路由
路由需要註入到vue實例中，才能使用
// 定義路由 var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] }) //在Vue實例中註入路由 new Vue({ el:"#app", data:{ name:"dk" }, components:{ ‘hello‘:{ template:"<p>hello</p>" } }, router:routers })
5.在html頁面中：
<div id="app">
<h1>hello,Vue</h1>
<p>
<router-link to="/bar">Go to bar</router-link>
<router-link to="/foo">Go to foo</router-link>
</p>
<router-view></router-view>
</div>
router-link標簽會默認渲染成“a標簽” to屬性指定路由的“跳轉”地址
router-view用於呈現組件的內容。
完整實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> //定義組件 var firstCpt = Vue.component(‘hello‘,{ template:`<div> <p>{{name}}</p> <button @click="send">點擊</button> </div>`, data:function(){ return{ name:"jjk" } }, methods:{ send:function(){ alert(‘fuck‘) } } }); // 定義路由 var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] }) //在Vue實例中註入路由 new Vue({ el:"#app", data:{ name:"dk" }, components:{ ‘hello‘:{ template:"<p>hello</p>" } }, router:routers }) </script> </html>
動態路由
我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。那麽，我們可以在 vue-router 的路由路徑中使用『動態路徑參數』
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> var User = { template: `<div>User {{ $route.params.id }}</div>` } var routers = new VueRouter({ routes: [ { path: ‘/user/:id‘, component: User } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
『路徑參數』使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。於是，我們可以更新 User 的模板，輸出當前用戶的 ID 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。驗證一下：
當點擊鏈接時， mouted鉤子函數只執行了一次。
嵌套路由
實際的項目中，通常是多層嵌套的組件組合而成的，通過url參數對應嵌套的 各層組件
上面的實例 在demo.html中
<div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div>
router-view是最頂層的路由，渲染最高級路由匹配到的組件。同樣地，一個被渲染組件同樣可以包含自己的嵌套 <router-view>。例如，在 User 組件的模板添加一個 <router-view>：
var User = { template: ` <div>User {{ $route.params.id }}</div> <router-view></router-view> `, mounted:function(){ alert("666"); } }
組件User中存在一個路由，要渲染這個路由，需要在VueRouter中設置 children選項
var routers = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User,
children:[
{
path:"index",
component:Index
},
{
path:"home",
component:Home
}
] }
]
});
children 配置就是像 routes 配置一樣的路由配置數組 唯一的區別就是：path選項不需要“/” 這跟angular不同。
完整實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> <router-link to="/user/foo/index">/user/foo/index</router-link> <router-link to="/user/foo/home">/user/foo/home</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> var User = { template: ` <div> <div>User {{ $route.params.id }}</div> <router-view></router-view> </div> `, mounted:function(){ alert("666"); } }; var Home = { template:` <div> <div>home page</div> <div>User {{ $route.params.id }}</div> </div> ` }; var Index = { template:` <div> <div>index page</div> <div>User {{ $route.params.id }}</div> </div> ` } var routers = new VueRouter({ routes: [ { path: ‘/user/:id‘, component: User, children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
命名路由
當一個項目中，存在很多路由時，通過一個名稱在標誌一個路由很更方便 標誌一個路由可以在VueRouter中，使用name選項給該路由設置名稱
var routers = new VueRouter({ routes: [ { path: ‘/user/:id‘, component: User,name:"user", children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] });
要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象，該對象接收 name--路由名稱 params--url參數（對象的形式）
<router-link :to="{ name: ‘user‘, params: { id: 123 }}">User</router-link>
命名視圖
有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar（側導航） 和 main（主內容） 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設置名字，那麽默認為 default。
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
一般來說，一個視圖對應一個“大”組件（該組件嵌套其他組件） 因此對於同個路由，多個視圖就需要多個組件。確保正確使用 components 配置（帶上 s）：
const router = new VueRouter({ routes: [ { path: ‘/‘, components: { default: Foo, a: Bar, b: Baz } } ] })
Vue---router