Vue之路由(Vue Router)

2023-12-14 19:13:11

🥑什么是Vue Router

Vue Router是Vue.js官方的路由管理库,它与Vue.js核心深度集成,提供了构建SPA所需的一切。通过使用Vue Router,我们可以实现页面的无刷新切换、嵌套视图、路由参数、导航守卫等功能,使得我们的应用更具交互性和用户友好性。

🥑安装和配置Vue Router

首先,我们需要确保已经安装了Vue.js。如果没有安装,可以通过以下命令安装:

npm install vue

接下来,我们需要安装Vue Router:

npm install vue-router

安装完成后,我们可以在项目的入口文件(通常是main.js)中配置Vue Router:

// main.js

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 },
    { path: '/about', component: About },
    // 更多路由规则...
  ]
})

new Vue({
  render: h => h(App),
  router  // 将router实例注入Vue实例
}).$mount('#app')

在上面的代码中,我们首先引入Vue和VueRouter,然后使用Vue.use()安装VueRouter。接着,我们创建了一个router实例,配置了一些基本的路由规则,并将这个实例注入到Vue实例中。

🥑基本的路由配置

🍄路由规则

在上面的例子中,我们定义了两个基本的路由规则,一个是根路径(/)对应的组件是Home,另一个是路径/about对应的组件是About。这些规则告诉Vue Router在不同的路径下应该渲染哪个组件。

🍄路由链接

要在应用中实现路由导航,我们可以使用<router-link>组件。例如,在一个导航栏中,我们可以这样使用:

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

上面的代码中,<router-link>被用于创建路由链接,to属性指定了链接的目标路径。<router-view>则是用于显示当前路径对应的组件。

🥑路由参数

有时,我们需要在路由中传递参数。Vue Router允许我们通过在路由规则中使用冒号标记来实现这一点。

// main.js

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在上述例子中,:id是一个动态的路由参数,它可以匹配任何非空字符串。我们可以在组件中通过$route.params.id来访问这个参数。

🥑嵌套路由

Vue Router还支持嵌套路由,这使得我们可以在应用中创建更为复杂的页面结构。

// main.js

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

上述例子中,UserProfileUserPostsUser组件的子组件,它们分别对应于路径/user/:id/profile/user/:id/posts

🥑导航守卫

导航守卫允许我们在导航发生时执行一些逻辑。Vue Router提供了多个导航守卫,例如beforeEachbeforeResolveafterEach等。我们可以使用这些导航守卫来进行权限验证、数据加载等操作。

// main.js

const router = new VueRouter({
  routes: [
    // 路由规则...
  ]
})

router.beforeEach((to, from, next) => {
  // 在导航发生前执行逻辑
  // 比如权限验证

  if (to.meta.requiresAuth) {
    // 需要验证权限
    if (checkAuth()) {
      next() // 允许导航
    } else {
      next('/login') // 重定向到登录页
    }
  } else {
    next() // 不需要验证权限,直接导航
  }
})

在上述例子中,beforeEach导航守卫用于进行权限验证。如果路由规则中包含meta.requiresAuth属性,并且用户未通过验证,我们将重定向到登录页。

🥑基本用法

🍄创建路由实例

在Vue项目中,首先需要创建一个路由实例。通常,我们会在src目录下创建一个router文件夹,并在其中创建一个index.js文件:

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue')
    }
  ]
})

export default router

🍄在主应用中使用路由

要在主应用中使用路由,需要在main.js中引入并使用路由实例:

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

🍄创建视图组件

src/views目录下创建Home.vueAbout.vue作为两个示例视图组件。

<!-- Home.vue -->
<template>
  <div>
    <h2>Home Page</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<!-- About.vue -->
<template>
  <div>
    <h2>About Page</h2>
    <p>Learn more about us!</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

🍄在模板中使用路由链接

在需要使用路由链接的地方,可以使用<router-link>标签:

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

🥑路由传参

有时,我们需要在路由间传递参数。Vue路由提供了多种方式来实现这一点,包括动态路由、查询参数等。以下是一个简单的动态路由示例:

// router/index.js
// 在路由配置中定义动态参数
{
  path: '/user/:id',
  component: () => import('@/views/User.vue')
}
<!-- User.vue -->
<template>
  <div>
    <h2>User Page</h2>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

在这个示例中,通过在路由配置中定义:id作为动态参数,我们可以在User.vue组件中通过$route.params.id来获取传递的参数。

🥑总结

Vue路由是构建现代单页面应用的重要工具之一。通过使用Vue路由,我们可以轻松地管理页面导航、传递参数,并创建更加灵活和交互性的用户界面。以上只是Vue路由的入门介绍,还有许多高级特性和用法等待你去探索和使用。希望这个简单的示例能够帮助你更好地理解和使用Vue路由。

文章来源:https://blog.csdn.net/qqq1994_0810/article/details/134999127
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。