vue-router
<!-- router-link 默认会被渲染成一个 a 标签 -->
<router-link to="/home"> go Home </router-link>
<!-- 命名路由 -->
<router-view to="/home" name = 'a'> </router-view>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
//组件
var Home = {
template:'<h3> 我是主页 </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'}
]
//生成路由实例
const router = new VueRouter({
mode:'history', //history模式区别于hash，不会生成很丑的hash
routes // (缩写)相当于 routes:routes
})
//挂载到vue上
new Vue({
router
}).$mount('#app')
动态路由匹配
//自动匹配/user/xxx到 User组件
{path:'/user/:id',component:'User'}
//当匹配到该路由的时，后面的id参数值会被设置到this.$route.params
const User = {
template:'...',
watch:{
'$route'(to,from){
// 对路由变化做出响应
}
}
}
编程式路由
点击<router-link :to='...'>等同于调用router.push(…)，会像history添加记录。
// 字符串
router.push('home')
// 对象
router.push({path:'home'})
// 命名的路由,变成/user/123
router.push({path:'user',params:{userId:123}})
// 带查询参数，变成 /user?id=123
router.push({path:'user',query:{id:123}})
// 跟router.push的区别就是，它不会像history添加新记录，而是替换掉当前的history记录。
router.replace(location);
// 在history记录中向前或者向后退多少步
router.go(n)
路由懒加载
// 将组件定义成异步组件
const Foo = resolve => {
require.ensure(['./Foo'],() => {
resolve(require('./Foo'))
})
}
// 一样的路由配置
const routes = [
{path:'/foo',component:Foo}
]
