Vue之路由(Vue Router)

文章目录

- 🥑什么是Vue Router
- 🥑安装和配置Vue Router
- 🥑基本的路由配置
- - 🍄路由规则
  - 🍄路由链接
- 🥑路由参数
- 🥑嵌套路由
- 🥑导航守卫
- 🥑基本用法
- - 🍄创建路由实例
  - 🍄在主应用中使用路由
  - 🍄创建视图组件
  - 🍄在模板中使用路由链接
- 🥑路由传参
- 🥑总结

🥑什么是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.jsimport 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.jsconst router = new VueRouter({routes: [{ path: '/user/:id', component: User }]
})

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

🥑嵌套路由

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

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

上述例子中，UserProfile和UserPosts是User组件的子组件，它们分别对应于路径/user/:id/profile和/user/:id/posts。

🥑导航守卫

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

// main.jsconst 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 = falsenew Vue({render: h => h(App),router
}).$mount('#app')

🍄创建视图组件

在src/views目录下创建Home.vue和About.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>