vue app准备学习工作

1.路由

1.vue-router

路由跳转

<router-link></router-link>相当于a标签的路由
或者 this.$router.push({path:''})

路由渲染

<router-view></router-view>

2.动态路由的匹配

$route.params获取路由信息

history.back()//后退
history.go()//默认刷新
history.go(1);//前进
history.go(-1);//后退

vue-router就是对history的一个封装

路由设置

Vue.use(Router);
export default new Router({
    mode:'history',//mode:'hash'
    routes:[{
        path:'/goods/:id',
        name:'',
        component:
    }
    ]
});

3.嵌套路由

routes:[{
path:'/goods',
name:'GoodsList',
component:GoodsList,
children:[{
    path:'title',
    name:'title',
    component:Title
},{
    path:'image',
    name:'image',
    component:Image
}
]
}
]

app.vue中引入router-view挂载路由，在父组件中也需要用router-view挂载子组件，例如：

<router-link to='/goods/title'></router-link>//路由跳转
<router-link='/goods/image'></router-link>
<router-view></router-view>

3.编程式路由

$router.push('name');//路由跳转
$router.push({path:'name'});
$router.push({path:'name?a=123'});
$router.push({path:'name',query:{a:123});

4.命名路由和命名视图

<router-link v-bind:to="{name:'cart'}"></router-link>
<router-link v-bind:to="{name:'cart',params:{cartid:123}}"

<router-view name="title"></router-view>
<router-view name="img"></router-view>

components:{
    default:GoodsList ,
    title:Title,
    img:Image
}