vue-router使用

一.基础

router-link to="" 解析成a标签,路由至to
router-view 路由匹配的模块显示在这个之中

=>引用
=>定义
const routes = {
    {
    path:'/home',
    component:home
    }...
}
=>创建router实例
const router = new VueRouter({
routes //routes:routes的缩写
})
=>注入

二.动态路由

同一模式的路由,映射到同一页面构成下

{
path:'./user/:id/post/:postId',
component:user
} 
user/xx/post/xxx  都会路由到user组件下
参数为this.$route.params.id与postId
同一路由下,组件不会被销毁创建,所以通过watch $route对象来实现监听

支持正则与其他高级匹配模式

三.嵌套路由

通过children配置嵌套路由
'/path' --- 根目录下的path
'path' --- 当前目录下的path
children:[
    {path: component}
    {}
]

四.编程式导航

1.router.push({ path.../name: 'user', params: { userId: 123 }})
相当于点击了router-link标签
2.router.replace(location)
替代当前路由(跳转,然后删除上个history)
3.router.go(n) 
跳转多少步

五.命名路由

name:user
path:'/user/:id',
...
然后在router0-link使用to:"{name:'user',params:{is:123}}" 类似与push

六.命名视图

显示多个组件

router-view  
router-view name="a"

配置 --- 默认是default
conponents:{
    default:home,
    a:loading
}
然后将home挂载在第一个
loading挂载到name为a的router-view中