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

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

相关推荐
Dragon Wu6 分钟前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss7 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师10 分钟前
React面试题
前端·javascript·react.js
木兮xg11 分钟前
react基础篇
前端·react.js·前端框架
ssshooter34 分钟前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘1 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 小时前
HTML HTML基础(4)
前端·html
给月亮点灯|2 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰2 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频