vue-router就是路由管理器
开始
比如我们从一个url跳转到另一个url,组件应该加载哪一个,这就是路由的作用。
那么,最简单的一个例子:我们将组件映射到路由,然后告诉vue-router在哪里渲染。
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在,应用已经启动了!
这来自官网的例子,很容易理解。我们在这个例子中,实现了上边所说的功能。
动态匹配路由
需求:当我们访问博客user组件的时候,很明显,我们有很多用户,每个用户都有自己的信息。比如/user/1``/user/2
,对于这种路由的实现,就需要用到动态路由匹配
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
我们在组件中:
<route-link :to='`/user/${userId}`'>用户页面</route-link>
这里,userId肯定是我们这个组件中有的。在这里直接用了而已。
当这里userId为1的时候,就匹配到/user/1,那么我们进入user组件中,可能还会用到参数1。可以通过this.$route.params
访问。
router.push
router.push实际上和使用router-link
创建a标签是一样的。
我们在vue的组件中,可以通过this.$router.push
来使用
// 命名的路由
//path: '/user/:userId',
//name: 'user',
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: '/', query: { page: newPage }})
导航守卫
导航:路由正在发生改变
需求:我们有一个create页面,当然,创建页面只有在用户登录之后,才能使用。这个时候,我们就需要在路由到create之前做出登录状态判断,如何已经登录,就可以访问,否则,跳转到登录页面。
我们在例子中使用了router-beforeEach
注册了一个全局前置守卫当一个导航触发时,全局前置守卫按照创建顺序调用。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
路由元信息
定义路由时候,可以配置meta字段
meta: { requiresAuth: true }
全局导航守卫中检查元字段:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
网友评论