|
Vue路由官方文档学习笔记 Vue是一个易于上手的渐进式JavaScript框架，它可以帮助我们更方便、快捷地构建单页面应用程序（SPA）。其中，Vue Router是Vue中的一个非常重要的组件，主要用于管理整个应用程序的路由。本文将介绍Vue路由官方文档的学习笔记。 一、Vue Router入门 首先，我们需要通过npm或yarn安装Vue Router: npm install vue-router
yarn add vue-router 登录后复制 然后，我们在main.js中引入Vue Router并将其挂载： import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/',
component: Home
}]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')登录后复制 其中，我们通过Vue.use()方法将Vue Router注册到Vue中，然后创建了一个新的VueRouter实例，并设置了路由规则。在最后，我们把VueRouter实例挂载到Vue实例上。 接下来，我们需要给路由规则设置相应的组件，例如： import Home from './views/Home.vue'
import About from './views/About.vue'
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
})登录后复制 在上面的代码中，我们引入了Home和About组件，并在路由规则中使用了它们。当访问根路径时，会渲染Home组件，而当访问/about路径时，则会渲染About组件。 二、路由跳转 在使用Vue Router的过程中，我们经常会需要进行路由跳转。Vue Router提供了多种方式来实现路由跳转，例如： 1.通过$route对象实现 我们可以在组件中通过$route对象来实现路由跳转，例如： this.$router.push('/about')登录后复制 2.通过$route.linkActive class实现 当我们在页面中需要为当前选中的路由添加一个特定的样式时，可以使用$route.linkActive class。例如： <router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link> 登录后复制 在上面的代码中，当当前路由和指定路由匹配时，会为该路由元素添加active样式。 3.通过编程式导航实现 在某些情况下，我们需要在JavaScript代码中进行路由跳转，例如表单提交后跳转到指定页面。此时，可以使用编程式导航来实现路由跳转，例如： // 使用命名路由跳转
this.$router.push({ name: 'about' })
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })登录后复制 三、路由组件传递参数 在实际开发中，我们经常需要将一些参数从一个路由组件传递到另一个路由组件。Vue Router提供了多种方式来实现路由组件传递参数，例如： 1.通过$route对象实现 当我们需要在路由组件中获取路由参数时，可以使用$route.params对象，例如： // 定义路由规则
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
// 在组件中获取路由参数
export default {
methods: {
goToUser(id) {
// 参数传递方式1
this.$router.push('/user/' + id)
// 参数传递方式2
this.$router.push({ path: '/user/' + id })
// 参数传递方式3
this.$router.push({ name: 'user', params: { id }})
}
}
}
// User组件中获取路由参数
export default {
created() {
const id = this.$route.params.id
}
}登录后复制 2.通过query参数实现 query参数是一种比较灵活的传参方式，它可以将参数直接拼接在URL后面进行传递，例如： this.$router.push({
path: '/user',
query: { id: 123 }
})
// User组件中获取query参数
export default {
created() {
const id = this.$route.query.id
}
}登录后复制 四、路由钩子函数 Vue Router提供了多种路由钩子函数，可以帮助我们在路由变化时执行不同的操作。例如，我们可以在进入组件之前检查用户登录状态，或者在路由变化时进行页面跳转等操作。 1.全局路由钩子函数 全局路由钩子函数会在整个应用程序中的路由变化时都触发，例如： const router = new VueRouter({
routes: [...],
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断用户是否登录
if (to.meta.requireAuth && !store.state.isUserLogin) {
next({ path: '/login' })
} else {
next()
}
})
// 全局后置钩子
router.afterEach((to, from) => {
// 页面跳转统计
statistics(to.path)
})登录后复制 在上面的代码中，我们通过router.beforeEach()方法定义了一个全局前置守卫，用于判断用户是否登录，如果未登录则跳转到登录页面。在全局后置钩子中可以进行一些统计或其他操作。 2.组件内路由钩子函数 除了全局路由钩子函数，Vue Router还提供了一些组件内的路由钩子函数，例如beforeRouteEnter、beforeRouteLeave和beforeRouteUpdate。例如，我们可以在beforeRouteEnter钩子函数中获取组件实例并进行一些初始化操作，例如： export default {
beforeRouteEnter(to, from, next) {
// 获取组件实例
const vm = this
// 发起异步请求
getAsyncData().then(response => {
// 将数据保存到组件的data中
vm.data = response.data
// 继续路由跳转
next()
})
}
}登录后复制 在上面的代码中，我们在组件进入路由时触发了beforeRouteEnter钩子函数，在获取异步数据后将数据保存到组件的data中，并通过next()方法继续路由跳转。 总结： 本文主要介绍了Vue Router官方文档的学习笔记，包括Vue Router的入门、路由跳转、路由组件传递参数和路由钩子函数等方面。希望对大家在Vue开发中使用Vue Router有所帮助。 以上就是Vue路由官方文档学习笔记的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
