官方文档的示例代码
// literal string path
router.push('home')
// object
router.push({ path: 'home' })
// named route
router.push({ name: 'user', params: { userId: 123 }})
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = 123
// -> /user/123
router.push({ name: 'user', params: { userId }})
// -> /user/123
router.push({ path: `/user/${userId}` })
// This will NOT work, -> /user
router.push({ path: '/user', params: { userId }})
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
}}
]
})
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// for routes with named views, you have to define the `props` option for each named view:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
要点摘录
-
API Reference: $route.params, $route.query, $route.hash,
TODO deeper learning need
- Reacting params changes, the same component instance will be reused, lifecycle hooks of the component will not be called. Two ways to solve it:
- watch the $route object
- use the beforeRouteUpdate(only for same component) guard introduced in 2.2
- Rue-router uses path-to-regexp as its path matching engine, so it supports many advanced matching patterns.
- Nested routes: note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.
- Programmatic navigation( push vs replace vs go)
-
<router-link :to="..."> is the equivalent of calling router.push(...)
- The argument can be a string path, or a location descriptor object.
-
Params are ignored if a path is provided, which is not the case for query(note: see example above).
- $router.replace: Acts like router.push, the only difference is that it navigates without pushing a new history entry
- $router.go: Takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack, similar to window.history.go(n).
- All three methods are counterparts of window.history.pushState, window.history.replaceState and window.history.go.
- Your display multiple views in same path just by specify the components object in router and use multiple
<vue-router> in template
- Your can use a function for dynamic redirecting.
- You can decouple $route with component by using props, route.params will be set as the component props.
- When props is an object, this will be set as the component props as-is. Useful for when the props are static.
- You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc.
- HTML5 history mode
- The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
- To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload.
个人总结
- 对于同一个Component，params发生改变可以通过watch $route来监控变化。务必注意的是，如果跳走到了一个不同的Component，监控代码是不会被执行到的。
- 同理在项目开发中，beforeRouteUpdate代码没管用，文档说该方法是在在2.2中被引入的（自己Vue和Vue-Router的版本都是>2.2的），最终验证得知，beforeRouteUpdate是用来监听 param和query这一层次变化的。在项目开发中，最初的新增职位和编辑职位是同一个route和Component，互跳是可以用该钩子的，但是跳转到其他route需要用其他方式比如beforeEach进行判断。
- 关于自己使用$router.push({path, param})发现param参数不起作用，大概是因为把
name跟path搞混了
- 关于hash 和 history 两种mode的异同
- 可以在Vue-Router的传入参数中指定，都能用来最SPA应用，默认是has模式
- hash把路由相关部分记录在
#/之后，改变hash部分不会刷新页面，但是路径难看
- history利用了html5新api，可以在切换历史状态，甚至修改历史状态，看起来路由更好看，问题是刷新以后会向后台发送HTTP请求，所以需要后台服务器进行一些简单的配置。那么问题来了，可以看一看HR端的后台服务器是怎么配置的吗？
