文章目录
1.前言
上篇文章说下下两种路由各自的原理及优缺点,那么这篇文章来开始vue-router学习!
2.路由的使用步骤
安装模块
npm install vue-router --save
引入模块
import VueRouter from 'vue-router'
vue使用vue-router插件
Vue.use(VueRouter)
创建路由实例对象
let vueRouter =new VueRouter({
//配置参数..
})
注入vueRouter参数
new Vue({
vueRouter //或者写全 vueRouter :vueRouter
})
告诉路由渲染的位置
<router-view></router-view>
3.一个最简单的路由例子
我们用之前vue-cli脚手架创建的项目来做例子,可以利用vue单文件组件来开发!首先先来看下入口文件main.js,里面导入vue,App是个单文件组件,router 是和路由相关的代码!
import Vue from 'vue'
import App from './App' //import App from './App.vue'
import router from '@/router' // import router from 'src/router/index.js'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App />'
})
再来看下App.vue单文件组件,其实里面就只有个<router-view></router-view>,路由匹配到的组件将渲染在这里
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style>
</style>
再来看下router里面index.js,这里主要是写了一些路由的配置相关代码,首先要必须先要导入VueRouter和vue ,要在vue上使用VueRouter插件,必须要vue.use(VueRouter),不要问为什么,因为插件都是这么玩的,然后还需要导入path匹配的组件(HelloWorld组件),所有的都准备就绪了,下面就需要配置路由信息了,因为VueRouter是个构造函数,所以必须要new出实例,参数是一个对象,对象的key是routes,注意了routes(不是routers,很容易写错),value就是路由匹配配置了,它是个数组(包含多个路由匹配配置),这里只有一个,path是匹配的路径,'/' 是根目录的意思,component是配置的组件,所以根目录就匹配到HelloWorld组件!
import VueRouter from 'vue-router'
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
Vue.use(VueRouter)
/* eslint-disable no-new */
let vueRouter = new VueRouter({
routes: [{
path: '/',
component: HelloWorld
}]
})
export default vueRouter
最后来看下HelloWorld组件,其实就一个div,所以直接把这个div会渲染到上面的App.vue中<router-view></router-view>上,就这么简单!
<template>
<div>HelloWorld组件</div>
</template>
<script>
export default {
name: "HelloWorld"
}
</script>
<style>
</style>
我们执行 npm run dev就可以看到路由匹配到的HelloWorld组件就渲染到页面上!路由默认是hash模式,所以url里面会有#号
我们来改下路由的模式,找到router里面的index.js文件添加history模式
import VueRouter from 'vue-router'
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
Vue.use(VueRouter)
/* eslint-disable no-new */
let vueRouter = new VueRouter({
mode: 'history', //使用history模式
routes: [{
path: '/',
component: HelloWorld
}]
})
export default vueRouter
再来看下url地址,没有#号了!就是这么简单!
我们再来把例子升级一下,假如有3个页面(首页home,帮助页面help,联系我们页面contact us),我们需要点击不用的标签进入到不同的页面上,并且最开始进来是首页的样式!需要点击,那么我们肯定会想到点击元素,这里我们使用3个a标签!修改App.vue文件(由于只是演示,所以style样式我去掉了)
<template>
<div>
<a href="/home">home页面</a>
<a href="/contactUs">contact us页面</a>
<a href="/help">help页面</a>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
有个不同的路径,所有我们需要创建不同的组件去匹配这些路径!下面我只展示添加一个Home组件的代码,其他的都是类似的!
<template>
<div>
home
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
接下来我们来修改路由的配置,找到router里面的index.js文件,把对应的path和组件匹配上, 其实name就相当于给你的path取个别名,方便使用,路由并不是一定要设置name值。(如果不设置name,vue-router默认name值为 default,后面会做到name的作用)
import Vue from 'vue'
import Router from 'vue-router'
import contactUs from '@/components/contactUs'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/contact us',
name: '/contactUs',
component: contactUs
},
{
path: '/help',
name: 'help',
component: Help
}
]
})
我们再来看下运行结果
你仔细看到动画的最后,鼠标放到圆形的箭头上,显示"重新加载此页",前面每次点击你可以很清楚的发现那个圆形箭头每次都闪了下(页面刷新了),不是history不刷新页面吗?这里确实是每次点击都刷新了页面,是因为我用的是a标签,每次点击都会触发它的默认事件,所以之前演示history原理的时候我阻止了a标签的默认事件,每次都要阻止了a标签的默认事件很麻烦,所有vue-router就帮我们做了这个事件,把a标签换成< router-link >标签,修改App.vue文件如下:
<template>
<div>
<router-link to="/home">home页面</router-link>
<router-link to="/about">about页面</router-link>
<router-link to="/help">help页面</router-link>
<!-- <a href="/home">home页面</a>
<a href="/about">about页面</a>
<a href="/help">help页面</a> -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
to后面接的是路径,也可以接一个对象(后面会说到),再来看运行的结果,圆形的箭头就不会闪动了(页面不再刷新了)