入门
用 Vue + Vue Router 创建单页应用非常简单:当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。
- router-link
我们没有使用常规的 a 标签,而是使用一个自定义组件 router-link 来创建链接。
router-link将呈现一个带有正确 href 属性的 a标签,这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。
<div id="app">
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</p>
<!-- 路由出口 -->
<router-view></router-view>
</div>
页面自动生成带href的a标签
-
router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。 -
JavaScript
- 定义路由组件.
也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
- 定义一些路由
每个路由都需要映射到一个组件。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
- 创建路由实例并传递
routes
配置
const router = VueRouter.createRouter({
// 为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
- 创建并挂载根实例
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
通过调用 app.use(router),我们可以在任意组件中访问它,并且以 this.$route 的形式访问当前路由:
export default {
computed: {
username() {
return this.$route.params.username
},
},
methods: {
goToDashboard() {
if (isAuthenticated) {
this.$router.push('/dashboard')
} else {
this.$router.push('/login')
}
},
},
}
带参数的动态路由匹配
有时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 :
const User = {
template: '<div>User</div>',
}
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]
现在像 /users/abc 和 /users/123 这样的 URL 都会映射到同一个路由。
路径参数 用冒号 : 表示它的 params 的值将在每个组件中以 this.$route.params 的形式显示。
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}
可以在同一个路由中设置有多个 路径参数,
如:匹配模式:/users/:username/posts/:postId
匹配路径:/users/eduardo/posts/123
显示:{ username: ‘eduardo’, postId: ‘123’ }
响应路由参数的变化
使用带有参数的路由时需要注意的是,当用户从 /users/abc导航到 /users/123 时,相同的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用。
要对同一个组件中参数的变化做出响应的话,你可以简单地 watch $route 对象上的任意属性,在这个场景中,就是 $route.params :
const User = {
template: '...',
created() {
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
// 对路由变化做出响应...
}
)
},
}
或者,使用 beforeRouteUpdate 导航守卫,它也可以取消导航:
const User = {
template: '...',
async beforeRouteUpdate(to, from) {
// 对路由变化做出响应...
this.userData = await fetchUser(to.params.id)
},
}
(具体参考Vue官方文档)