【vue】--vueRouter
动态路由匹配
const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })
当匹配到一个路由时,参数值会被设置到this.$route.params
响应路由参数的变化
watch: { '$route' (to, from) { // 对路由变化作出响应... } }
beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next()
// 在当前路由改变,但是该组件被复用时调用 (动态路由)
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
}
捕获所有路由或 404 Not found 路由
{ // 会匹配所有路径 path: '*' } { // 会匹配以 `/user-` 开头的任意路径 path: '/user-*' }
当使用一个通配符时,$route.params
内会自动添加一个名为 pathMatch
参数。它包含了 URL 通过通配符被匹配的部分
编程式的导航
router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path
,params
会被忽略,上述例子中的 query
并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name
或手写完整的带有参数的 path
:
const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
同样的规则也适用于 router-link
组件的 to
属性。
注意: 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1
-> /users/2
),你需要使用 beforeRouteUpdate
来响应这个变化 (比如抓取用户信息)。
命名视图
如果 router-view
没有设置名字,那么默认为 default
<router-link to="/">/</router-link>
<router-link to="/other">/other</router-link>
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s): const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
重定向和别名
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 甚至是一个方法,动态返回重定向目标: const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ] }) 注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。
别名
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })
路由传参
一、直接在path 上传参 基本和 params传参一样
goSearch(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/search/${id}`, }) 对应路由配置: { path: '/describe/:id', name: 'Describe', component: Describe } 在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。 this.$route.params.id
二、params传参 注意 params传参必须用name来引入路由
this.$router.push({ name: 'Search', params: { id: id } }) 对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示 { path: '/search/:id', 需要加上 /:id 否则刷新页面后,参数丢失 name: 'Search', component: Search } 获取参数: this.$route.params.id
三、query传参 (参数显示在 url) 由path 引入路由
this.$router.push({ path: '/search', query: { id: id } }) 对应路由配置: { path: '/search', name: 'Search', component: Search } 获取参数: this.$route.query.id
本博客仅作为个人学习记录