vue-router
<!-- router-link 默認(rèn)會(huì)被渲染成一個(gè) a 標(biāo)簽 -->
<router-link to="/home"> go Home </router-link>
<!-- 命名路由 -->
<router-view to="/home" name = 'a'> </router-view>
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
//組件
var Home = {
template:'<h3> 我是主頁(yè) </h3>'
}
var User = {
tempalte:'<h3> 用戶 </h3>'
}
//配置路由
const routes = [
{
path:'/home',
//匹配命名路由
components:{
a:Bar,
b:Baz
},
//路由嵌套颜武，子路由 /home/user
children:[
{path:'user',component:User}
]
},
//重定向
{path:'*',redirect:'/home'}
]
//生成路由實(shí)例
const router = new VueRouter({
mode:'history', //history模式區(qū)別于hash，不會(huì)生成很丑的hash
routes // (縮寫(xiě))相當(dāng)于 routes:routes
})
//掛載到vue上
new Vue({
router
}).$mount('#app')
動(dòng)態(tài)路由匹配
//自動(dòng)匹配/user/xxx到 User組件
{path:'/user/:id',component:'User'}
//當(dāng)匹配到該路由的時(shí)转砖，后面的id參數(shù)值會(huì)被設(shè)置到this.$route.params
const User = {
template:'...',
watch:{
'$route'(to,from){
// 對(duì)路由變化做出響應(yīng)
}
}
}
編程式路由
點(diǎn)擊<router-link :to='...'>等同于調(diào)用router.push(…)局义，會(huì)像history添加記錄欢际。
// 字符串
router.push('home')
// 對(duì)象
router.push({path:'home'})
// 命名的路由,變成/user/123
router.push({path:'user',params:{userId:123}})
// 帶查詢參數(shù)，變成 /user?id=123
router.push({path:'user',query:{id:123}})
// 跟router.push的區(qū)別就是耍属，它不會(huì)像history添加新記錄托嚣，而是替換掉當(dāng)前的history記錄。
router.replace(location);
// 在history記錄中向前或者向后退多少步
router.go(n)
路由懶加載
// 將組件定義成異步組件
const Foo = resolve => {
require.ensure(['./Foo'],() => {
resolve(require('./Foo'))
})
}
// 一樣的路由配置
const routes = [
{path:'/foo',component:Foo}
]
