vue-Router(初级篇)

路由的概念

1.什么是路由

路由是根据不同的url2.什么是前端路由

2.什么是前端路由

特点:不向后台发送请求,不刷新页面,前后端分离

3.什么是后端路由

特点:向服务器发送请求,会刷新页面,前后端不能分离

vue-Router前端路由

安装

npm install vue-router

版本控制: 一般比vue要高一个版本,比如vue2版本要下载vue-router3版本

初始化路由

1框架构成

javascript 复制代码
-------------main.js-------------
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件 
Vue.use(Router)  //Vue全局使用Router
let router= new Router({
  routes: [              //配置路由,这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称,
      component: Hello   //对应的组件模板
    }
    }
  ]
})
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

上面我已经将路由初始化好了,现在大家可能对上面代码有点不熟,但是也很正常,下面我就一一和大家分析一下

2.结构分析

直接从第一行开始分析

1.导入所需的文件

导入vue: import Vue from 'vue'
导入vue-router import Router from 'vue-router'
导入路由使用到的组件: import Hello from '@/components/Hello'

2.将路由全局注册到Vue

Vue.use(Router)

3.创建路由实例

let router= new Router({

routes: [ //配置路由,这里是个数组

{ //每一个链接都是一个对象

path: '/', //链接路径

name: 'Hello', //路由名称,

component: Hello //对应的组件模板

}

}

]

})

里面的 routes 配置就是用于配置路由信息的,后续路由的配置会详细讲解

4.将路由实例挂载到vue实例上去

new Vue({

render: h => h(App),

router

}).$mount('#app')

保证在任何组件都可以使用到vue-router

初级的路由也就差不多结束了后续给大家带来进阶版的使用

相关推荐
spmcor14 小时前
MinIO本地对象存储部署指南
前端
少年纪14 小时前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin14 小时前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍14 小时前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月14 小时前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00714 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom14 小时前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
东坡白菜14 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
Alan5215914 小时前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin14 小时前
TypeScript设计模式:策略模式
前端·后端·typescript