vue-router
vue router
vue-router 就是封装 浏览器中history。
使用vue-router用来构建SPA
<router-link to='/'></router-link> 或者 this.$router.push({path: '/'}) 相当于 <a></a>
<router-view></router-view> 主键的渲染
动态路由
模式 | 匹配路径 | $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组件中也要加<router-view>
编程路由
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值
<router-link :to='{name: 'cart'}'></router-link>
<router-link :to='{name: 'cart', params:{id: 123}}'></router-link>命名视图
加载多个视图, 一般用不到
export default new Router({
mode: 'history',
routers : [{
path: '/',
name: main,
component: {
default: List,
title: Title,
img: Img
}
}
]
})
<router-view name='title'></router-view>
<router-view name='img'></router-view>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录