$ cnpm install vue-router --save
vue的基本用法就是，分割成好多個(gè)組件问潭，
每個(gè)組件有 data,template,methods,computed,等等潜慎， 還有 components
這些組件都需要掛載在 html上
根組件比較簡(jiǎn)單鸥鹉， 就是在 new Vue（{}）的時(shí)候布持，可以用el 字段綁定掛載，
或者生成實(shí)例后钓账，new Vue({}).$mount("app") 來(lái)掛載
而其他組件則需要從根組件開始碴犬， 一個(gè)一個(gè)用標(biāo)簽的方式進(jìn)行掛載，
（或者叫渲染梆暮？插入服协？）
然后就會(huì)出現(xiàn)一個(gè)樹狀結(jié)構(gòu)，每個(gè)組件的最基本關(guān)系都是 父子關(guān)系啦粹。
父子關(guān)系的數(shù)據(jù)傳遞是靠 props 和 自定義事件偿荷， 以及slot來(lái)解決的。
為了方便非父子間組件的數(shù)據(jù)傳遞唠椭， 有了vue-x, store,state.
但是接觸了vue-router之后發(fā)現(xiàn)跳纳，
掛載，或者渲染組件的時(shí)候泪蔫，不一定要用父子間關(guān)系，
而是根據(jù)路由進(jìn)行配置喘批。
當(dāng)然最后的掛載（渲染撩荣？铣揉，插入？）餐曹，也是需要 <router-view> 這個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)的逛拱。
但你發(fā)現(xiàn)，沒有了父子關(guān)系之后台猴，
他要怎么傳遞數(shù)據(jù)呢朽合？
似乎是用url，除了url,和vue-x 還有別的方式嗎饱狂？
還有一個(gè)問題是曹步，既然組件可以用父子間關(guān)系來(lái)引入，也可以用router來(lái)引入休讳，
那么什么時(shí)候用父子間比較好讲婚？，什么時(shí)候用router引入比較好俊柔？
以上作為對(duì)vue的一點(diǎn)感受筹麸， 外加帶著疑問去學(xué)一下視頻。
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)// 為了注入?
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
想成所有組件都要在routes進(jìn)行注冊(cè)?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//必須要在根實(shí)例上注入.
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<a href="#/home">home</a>
<a href="#/about">about</a>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
用a標(biāo)簽也可以跳轉(zhuǎn)到相應(yīng)的組件,
只要url相應(yīng)的改變就可以
mode字段,
export default new Router({
mode : "history",// 用的是html的history
routes: [
...
]
})
<router-link to="/home">home</router-link> // 不刷新跳轉(zhuǎn)
<router-link to="/about">about</router-link> // 不刷新跳轉(zhuǎn)
<a href="/home">home</a>//刷新跳轉(zhuǎn)
<a href="/about">about</a>// 刷新跳轉(zhuǎn)
......................
export default new Router({
mode : "hash",// 默認(rèn)就是哈希模式
routes: [
...
]
})
<router-link to="/home">home</router-link> // 不刷新跳轉(zhuǎn)
<router-link to="/about">about</router-link> // 不刷新跳轉(zhuǎn)
<a href="#/home">home</a>//不刷新跳轉(zhuǎn)
<a href="#/about">about</a>//不刷新跳轉(zhuǎn)
用bind語(yǔ)法
<router-link :to="{path : '/home'}">home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
這樣就不用寫死了?
我們發(fā)現(xiàn),這個(gè)路由是通過(guò)#,來(lái)實(shí)現(xiàn)的,
或者說(shuō)是根據(jù)url來(lái)實(shí)現(xiàn)的
URL 的兩種風(fēng)格
RESTful : a/b/c/d
強(qiáng)調(diào)的是層次感?
非RESTful : ?key=value&key=value
強(qiáng)調(diào)的是數(shù)據(jù)?
動(dòng)態(tài)路由匹配
App.vue
<template>
<div id="app">
<router-link :to="{path : '/home'}">home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
<router-link :to="{name : 'Room',params : {id : 666}, query : {kw : 'wo'}}">room</router-link>
<router-link v-for="item in ids" :to="{name : 'Room',params : {id : item.id}}">{{item.name}}</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
ids : [
{
id : 111,
name : "渡一公開課"
},
{
id : 222,
name : "渡一就業(yè)班"
},
{
id : 333,
name : "渡一進(jìn)階班"
}
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Room from '@/components/Room'
import Err from '@/components/Err'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about/:di',
name: 'About',
component: About
},
{
path: '/room/:id?',// 這里如果沒有 ? 那 /room就不會(huì)渲染
name: 'Room',
component: Room
},
{
path: '/err',
name: 'Err',
component: Err
},
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '*',// 初級(jí)的導(dǎo)航守衛(wèi)
redirect (to) {
if (to.path == "/abc") {
return "/home"
}else {
return "/err"
}
}
},
]
})
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Room.vue
<template>
<div class="wrapper">
<div v-if="!$route.params.id">歡迎來(lái)到騰訊課堂</div>
<div v-else>當(dāng)前的房間號(hào)為 :{{$route.params.id}} 當(dāng)前房間名為{{roomName}}</div>
</div>
</template>
<script>
export default {
name : "Room",
data () {
return {
roomName : ""
}
},
created () {
if (this.$route.params.id) {// 模擬根據(jù)id從后臺(tái)獲取房間名(數(shù)據(jù))
setTimeout(() => this.roomName = "渡一",3000);
}
},
watch : {
$route(to,from) {
console.log(to.params.id,from.params.id);
}
}
}
</script>
<style>
</style>
其他組件就是基本模板.
