vue-router学习第一天

vue-Router

认识路由

路由:就是通过互联网把信息从源地址传输到目的抵制的活动,决定数据包从来源到目的地的路径
vue-router是基于路由和组件的:路由用于设定访问路径,将路径和组件映射起来;
在vue-router的单页面应用中,页面的路径的改变就是组件的切换。

vue-router的安装和配置方式

步骤一:
安装:npm install vue-router --save
步骤二:在模块化工程中使用它
1. 导入路由对象,并且调用Vue.use(VueRouter)
2. 创建路由实例,并且传入路由映射配置
3. 在Vue实例中挂载创建的路由实例

// 配置路由相关的信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 通过Vue.use(插件),安装插件
Vue.use(Router)
// 创建VueRounter对象并导出
export default new Router({// 配置路由和组件之间的应用关系routes:[{path: '/',name: 'HelloWorld',component: HelloWorld}]
})

import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,render: h => h(App)
})

使用vue-router的步骤:

创建路由组件
配置路由映射:组件和映射关系
使用路由:通过<router-link>加粗样式和<router-view>

<router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签

<router-link中的属性:

to:用于指定跳转的路径
tag:指定<router-link>之后被渲染成什么组件

<router-link to='/home' tag='button'>
// 此代码会被渲染成button标签,而不是a元素

replace:不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面中
active-class:当对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称。
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类但是通常不会修改类的属性,会直接使用默认的router-link-active即可

<router-view>:该标签会根据当前的路径,渲染出不同的组件

路由的默认值和修改为history模式

routes:[{path: '/',// 重定向,将路径重定向到/home的路径下,这样就可以得到我们想要的结果了redirect:'/home'}

改变路径的方式有两种:

URL的hash
HTML5的history
默认情况下,路径的改变使用URL的hash
如果希望使用HTML5的history模式,需要进行如下配置:

new Router({routes,mode:'history'
})

vue-router学习第一天相关推荐

Vue语法学习第一课——插值
学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 1 <span>Message:{{msg}}</span> 注:双大括号中 ...
（50）Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
VUE源码学习第一篇--前言
一.目的前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
Vue.js学习的第一天
Vue.js学习的第一天官网文档地址:传送门一.Vue介绍: 1.Vue.js是什么? 作者:2014年2月,尤雨溪曾就职于Google Creative Labs和Meteor Developm ...
Vue之router学习
router学习 js小问题起步定义动态路由匹配通配符 AND 404 高级匹配匹配优先级嵌套路由编程式的导航 push和replace 注意 router.go(n) 操作Histor ...
Vue学习第一天（部分标签应用）
Vue学习第一天第一步明确了MVC和MVVM的项目结构的特点,MVC是模型,控制器,视图三者的统一,同时也是我们经常用的结构,而MVVM,也是三个部分的结合体M, V, VM,其中V仍旧为视图,不过 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
vue.js基础学习（Vue Router安装与使用）
基础入门:vue.js Vue Router安装与使用 1.Vue Router安装在cmd窗口运行命令:npm install vue-router@4,安装Vue Router: 2. Vue ...