java router_vue-router

vue router

vue-router 就是封装 浏览器中history。

使用vue-router用来构建SPA

或者 this.$router.push({path: '/'}) 相当于

主键的渲染

动态路由

模式

匹配路径

$router.params

/usr/:username

/usr/xx

{ username: 'xx'}

hash & history

hash 默认模式，路由中展现为 url/#/, 后面的url取hash

history : mode 设置为history 后，就和平时使用的url一样

export default new Router({

mode: 'history',

routers : [{

path: '/',

name: main,

component:Main

}

]

})

嵌套路由

export default new Router({

mode: 'history',

routers : [{

path: '/',

name: main,

component:Main,

children: [

{

path: 'title',

name: title,

component:Title,

}

]

}

]

})

在Main组件中也要加

编程路由

this.$router.push('name')

this.$router.push({path:'name'})

this.$router.push({path:'name?id=123'})

this.$router.push({path:'name', query: {a: 123}})

命名路由

使用name 进行 路由跳转, v-bind:to='{name: 'xx'}', xx为路由定义的name值

命名视图

加载多个视图, 一般用不到

export default new Router({

mode: 'history',

routers : [{

path: '/',

name: main,

component: {

default: List,

title: Title,

img: Img

}

}

]

})