一。vue-route 简介:
- 通过<router-view></router-view>进行组件渲染。通过<router-link to="a"></router-link> 进行跳转(组件局部刷新)。
- api 导航:通过router实例,router.push() / router.replace / router.go() / router.
- 获取路由参数:t通过 route 属性进行获取 (this.$route.query / this.$route.params )。
二。动态路由说明:同一组件需要使用不同路由进行渲染时,则需要使用动态路由(动态路由通过冒号 : 进行操作的)。
例如:/user/:id. 这样后面的id就是不同的值。
如果需要监听路由参数变化则可以通过watch 里面监听 $route 属性。还可以通过 beforeRouteUpdate 组件导航钩子进行。
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}
三。new VueRouter({})。
const router = new VueRouter({
routes: [
{ path: '/user/:id', // 导航地址,这就是一个动态路由。
component: User, // 这个代码组件
meta: { name: 'a'}, // 路由云信息。
name: 'user', // 路由的名称。
redirect: '/a', // 路由重定向。
alias: '路由别名', // 路由别名。
children: [ // 这个代表子组件,也就是嵌套路由
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})
四。路由传参。
- 通过动态路由进行传参。
- 通过props 进行。prop 为 true / 为 对象 / 为函数 ,则可将动态路由的参数设置为组件属性。
- 通过this.$router.push (函数式导航传参)。
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) router.push({ path: `/user/${userId}` }) // -> /user/123 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
五
五。mode模式:hash 模式、history 模式(需要后端配合)、abstract
。
配置路由模式:
-
hash
: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。 -
history
: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 -
abstract
: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
六。scrollBehavior 主要用过导航后默认滚动。
七。路由懒加载。() => import('')