命名路由
- 在 routes 配置中给某个路由设置名称；
const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) - 命名路由的操作：都会把路由导航到 /user/123；
JavaScriptHTML
router.push({ name: 'user', params: { userId: 123 } })<router-link : to="{ name: 'user', params: { userId: 123 }}">User</router-link>
编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，还可借助 router 的实例方法，通过编写代码来实现；
-
router.push：会向 history 添加新记录；
// 字符串 router.push('/home') // 对象 router.push({ path: '/home' }) // 命名的路由，/register/123 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) // 注意：提供了 path，params 会被忽略，这里的 params 不生效 const userId = '123' router.push({ path: '/user', params: { userId } }) -
router.replace：不会向 history 添加新记录；
-
router.go(n)：在 history 记录中向前或者后退多少步，类似 window.history.go(n)；
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) -
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致；
打赏作者
您的打赏是我前进的动力
微信
支付宝
webpack 核心功能👉 全局变量
上一篇
评论
