vue路由如何渲染不一样页面

发布时间：2023-09-19 12:00:27 所属栏目：教程来源：网络

导读： 　　这篇文章主要讲解了“vue路由如何渲染不同页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue路由如何渲染不

　　这篇文章主要讲解了“vue路由如何渲染不同页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue路由如何渲染不同页面”吧！

　　Vue路由的基本概念

　　Vue路由是一种管理SPA（单页应用程序）页面的机制。它创建了不同的路径和URL地址，并将它们映射到不同的组件中。在Vue中，一个组件代表一个页面。当用户在SPA应用程序中导航时，Vue路由根据URL地址和路径来呈现相应的组件。

　　Vue路由主要有三个概念：路由、路由器和组件。路由是URL地址和组件之间的映射关系。路由器是Vue应用程序中用于管理应用程序路由的对象。组件是Vue应用程序中的一个可重用的Vue实例，它负责呈现页面内容。

　　创建Vue路由

　　要在Vue中使用路由，我们需要在Vue应用程序中安装Vue Router。安装Vue Router非常简单，只需要使用npm命令行工具来安装它。

　　npm install vue-router

　　安装完成后，我们需要在Vue应用程序中创建一个vue-router实例。vue-router实例包括一组路由，每个路由映射到一个组件。

　　// 引入 vue 和 vue-router

　　import Vue from 'vue'

　　import VueRouter from 'vue-router'

　　// 在 Vue 中使用 VueRouter

　　Vue.use(VueRouter)

　　// 定义路由组件

　　const Home = { template: '... Home ...' }

　　const About = { template: '... About ...' }

　　const Contact = { template: '... Contact ...' }

　　// 定义路由

　　const routes = [

　　 { path: '/', component: Home },

　　 { path: '/about', component: About },

　　 { path: '/contact', component: Contact }

　　]

　　// 创建路由器并传递路由集合

　　const router = new VueRouter({

　　 routes

　　})

　　// 创建Vue实例

　　const app = new Vue({ router }).$mount('#app')

　　在上面的代码中，我们定义了三个路由：Home、About和Contact。每个路由都映射到一个组件。我们还创建了一个包含所有路由的routes数组，并将其传递给VueRouter实例。然后，我们将VueRouter实例传递给Vue实例。

　　Vue路由的三种模式

　　Vue路由提供了三种模式：历史模式、哈希模式和抽象模式。这些模式有不同的用途和优点。

　　历史模式：使用HTML5 history API来实现URL地址管理。历史模式不适用于所有Web服务器配置。如果服务器在访问不存在的资源时返回404错误，则需要进行特殊配置。

　　创建路由器时，可以将模式设置为history来启用历史模式。

　　const router = new VueRouter({

　　 mode: 'history',

　　 routes

　　})

　　哈希模式：URL地址以井号#开头。这种模式比历史模式更容易实现，并且不需要特殊的服务器配置。

　　创建路由器时，可以将模式设置为hash来启用哈希模式。

　　const router = new VueRouter({

　　 mode: 'hash',

　　 routes

　　})

　　抽象模式：这种模式不包括URL地址。它适用于组件之间的内部导航。

　　创建路由器时，可以将模式设置为abstract来启用抽象模式。

　　const router = new VueRouter({

　　 mode: 'abstract',

　　 routes

　　})

　　渲染不同页面的组件

　　Vue路由可以根据路由配置的path来匹配对应的组件。我们可以在路由配置中定义路径和渲染的组件。

　　// 创建联系人组件

　　const Contact = {

　　 template: '<div>Contact</div>'

　　}

　　// 创建路由数组并映射路径到组件

　　const routes = [

　　 {

　　path: '/contact',

　　component: Contact

　　}

　　]

　　这将创建一个Contact组件并将其映射到/contact路径。当用户进入/contact路径时，Vue路由器将渲染Contact组件。

　　路由参数

　　路由参数是一个路径中的变量部分，比如：/contact/:id。当用户在浏览器中输入页面地址时，路由参数将被Vue解析并渲染相应的组件。我们可以在路由中动态定义参数值。

　　const Contact = {

　　 template: '<div>Contact {{ $route.params.id }}</div>'

　　}

　　const routes = [

　　 {

　　path: '/contact/:id',

　　component: Contact

　　}

　　]

　　用户进入/contact/123路径时，$route.params.id参数将被Vue路由器解析为123。Contact组件将使用这个参数来呈现对应页面。

　　路由钩子

　　Vue路由还提供了一个路由钩子机制，用于在路由进入和退出时执行特定的行为。路由钩子可以在组件中使用。Vue路由提供了三种钩子：

　　beforeEach：在路由切换之前调用。可以用于身份验证和授权等任务。

　　afterEach：在路由切换之后调用。可以用于日志记录和跟踪等任务。

　　beforeRouteLeave：在路由离开当前组件之前调用。可以用于提示用户保存更改或取消离开等任务。

　　// 全局钩子

　　router.beforeEach((to, from, next) => {

　　 // do something before route change

　　 next()

　　})

　　router.afterEach((to, from) => {

　　 // do something after route change

　　})

　　// 组件钩子

　　{

　　 beforeRouteLeave (to, from, next) {

　　// do something before component leaves

　　next()

　　}

　　}

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!