Vue Router(路由)
vue-router和vue.js是深度集成的,适合用于单页面应用.传统的路由是用一些超链接来实现页面切换和跳转.而vue-router在单页面应用中,则是组件之间的切换.其本质就是:建立并管理url和对应组件之间的映射关系.
1.0 vue 路由是什么
Vue路由是指根据url分配到对应的处理程序;作用就是解析URL,调用对应的控制器(的方法,并传递参数)。
Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接,从而允许某些路径渲染与之关联的任何一个视图。
2.0 为什么要使用路由
在传统的web开发中每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,
直接页面端修改下逻辑就能达到目的,在这种方式下最好的方法是使用路由,因为使用路由时,URL会随着改变,
用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人,这种方式对于搜索引擎和用户来说都是友好的
3.0 入门
我们在创建vue项目的时候,默认是都会把这个路由安装好的,直接使用就可以了。
步骤一:我们在 components文件夹下面新建两个页面 name.vue 和 age.vue
--- name.vue
<template>
<div>
我叫小夏
</div>
</template>
--- age.vue
<template>
<div>
我年方18
</div>
</template>
步骤二:在router文件夹下的index.vue 引入文件并配置路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 1.0 引入组件
import Name from '@/components/name'
import Age from '@/components/age'
Vue.use(Router)
// 2.0 定义路由
export default new Router({
//mode:'history', //路由模式:默认为hash,如果改为history,则需要后端进行配合
//base:'/',//基路径:默认值为'/'.如果整个单页应用在/app/下,base就应该设为'/app/'.一般可以写成__dirname,在webpack中配置.
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/name',
name:'Name', //给路由命名,设置的name要唯一!
component:Name, //就是第一步import的组件
},
{ //路由懒加载:单页面应用,首页时,加载内容时间过长.运用懒加载对页面组件进行划分,减少首页加载时间
path:'/age',
name:'Age',
component:()=>import('@/components/age'),//此时component则不需要在第一步import
}
]
})
步骤三:在App.vue中配置跳转
1, router-link组件来导航,用户点击后切换到相关视图.
2, router-view组件来设置切换的视图在哪里渲染.(一个页面也可以有多个router-view分别展示特定的视图,并且支持嵌套)
<template>
<div id="app" class="portal-app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/name">点我看看名字 </router-link>
<router-link to="/age">点我看看年龄 </router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view/>
</div>
</template>
这样基本的路由就算配置好了,点击就能看到组件之间的切换了。
我们在创建项目的时候,已经给我们挂载了路由,是main.js里面的如下:
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
通过创建和挂载根实例,让我们的整个程序都有路由功能。
通过注入路由器,我们可以在任何组件内通过 this. r o u t e r 访 问 路 由 器 , 也 可 以 通 过 t h i s . router 访问路由器,也可以通过 this. router访问路由器,也可以通过this.route访问当前路由对象:
Tips :这里我简单说明下 r o u t e r 和 router和 router和route的区别:
r o u t e r 是 指 整 个 路 由 实 例 , 你 可 以 操 控 整 个 路 由 , 通 过 ′ router是指整个路由实例,你可以操控整个路由,通过' r