Vue Router
任何组件内通过 this.$router 访问路由器,可以通过 this.$route 访问当前路由
回退
1 2 3
| goBack() { window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') }
|
动态路由匹配
1 2 3 4 5 6 7 8 9 10 11 12 13
| const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } { path: '/user/:username/post/:post_id', component: User } ] })
const User = { template: '<div>User {{ $route.params.id }}</div>' } this.$route.params.id
|
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
1 2 3 4 5 6 7 8 9 10
| watch: { $route(to, from) { } beforeRouteUpdate (to, from, next) { } }
|
捕获所有路由
1 2 3 4 5 6 7 8
| { path: '*' } { path: '/user-*' }
|
当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分:
1 2 3 4 5 6
| this.$router.push('/user-admin') this.$route.params.pathMatch
this.$router.push('/non-existing') this.$route.params.pathMatch
|
路由嵌套
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <div id="app"> <router-view></router-view> </div>
const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div>` }
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功, // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome },
// ...其他子路由 { // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] })
|
编程式的导航
声明式 |
编程式 |
router-link :to=”…” |
router.push(…) |
1 2 3 4 5 6 7 8 9 10 11 12 13
| router.push('home')
router.push({ path: 'home' })
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }}) const userId = '123' router.push({ name: 'user', params: { userId }}) router.push({ path: `/user/${userId}` })
router.push({ path: '/user', params: { userId }})
|
后退或前进
1 2 3 4 5 6 7 8 9
| router.go(1)
router.go(-1)
router.go(3)
router.go(-100) router.go(100)
|
命名路由
1 2 3 4 5 6 7 8 9 10 11 12 13
| const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
|
命名视图
1 2 3 4 5 6
| <div> <h1>User Settings</h1> <NavBar/> <router-view/> <router-view name="helper"/> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| { path: '/settings', component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] }
|
重定向和别名
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| 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 => { }} ] })
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })
|
路由组件传参
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| const User = { template: '<div>User {{ $route.params.id }}</div>' }
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })
// 通过 props 解耦
const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })
|
Vue Router 传参
params 传值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, name:'user',} ] })
this.$router.push({ name:"'user'", params:{ userId:"10011" } })
this.$route.params.userId
|
query 传值
1 2 3 4 5 6
| <template> <router-link :to="{ path: '/log', query: { name1: 'haha', name2: 'enen' } }" > </router-link> </tempalte>
|
1 2 3 4 5 6 7 8 9 10 11
| this.$router.push({ path:"/user", query:{ userId:"10011" } })
this.$router.currentRoute.query.userId this.$route.query.userId
|
基础路径
1 2 3 4 5 6 7 8 9 10
| const router = new VueRouter({ mode: 'history', base: '/app', routes: [ { path: '/user/:id', component: User } { path: '/user/:username/post/:post_id', component: User } ] })
|
hase 模式下 base 不起作用,可以用路由嵌套的方式加上前缀
相关资料
vue Router
vue $router 路由传参的4种方法详解√
vue router跳转方法√
vite —— 一种尤雨溪开发的新的、更快地 web 开发工具
vite