Vue路由: Vue

2023-09-07 09:16| 来源: 网络整理| 查看: 265

国庆连载（3）

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌.

1. Vue路由的安装和配置

1.1 安装vue路由

npm install vue-router --save-dev

2.2 配置vue路由

// 1. 导入路由并使用 import Vue from 'vue' // 导入vuerouter import VueRouter from 'vue-router'; // 使用功能VueRouter插件 Vue.use(VueRouter) // 2. 创建路由实例,并配置路由映射 // 2.1 创建路径与组件的映射关系 let routes = [ { path:'/home', component: Home }, { path:'/list', component: List }, { path:'/about', component: About } ] // 2.2 创建路由实例 var router = new VueRouter({ // 配置路由 routes, }) // 3. 将配置好的路由在Vue实例中使用 new Vue({ el:'#app', router })

2. 路由的基本概念

路由中有三个基本的概念route,routes,router.

1.route, 它是一条路由,就是一个路径和组件的映射关系

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

2.routes 是一组路由，把每条route的路由组合起来，形成一个数组。

routes:[ { path:'/', component: Home }, { path:'/list', component: List } ]

3.router 是一个路由机制，相当于一个管理者，他来管理路由。因为routes只是定义了一组路由，也就是一组路径和组件的对应关系,当用户点击了按钮,改变一个路径,router会更加路径处理不同组件

var router = new VueRouter({ // 配置路由 routes:[...] })

3. 路由的基本使用

3.1 内置的两个组件

router-link组件说

【本文地址】

公司简介

联系我们