vue全家桶系列之vue-router(二)

文章目录

1.前言

上篇文章说下下两种路由各自的原理及优缺点,那么这篇文章来开始vue-router学习!

2.路由的使用步骤

  1. 安装模块
npm install vue-router --save
  1. 引入模块
import VueRouter from 'vue-router'
  1. vue使用vue-router插件
Vue.use(VueRouter)
  1. 创建路由实例对象
let vueRouter =new VueRouter({
   //配置参数..
})
  1. 注入vueRouter参数
new Vue({
   vueRouter  //或者写全  vueRouter :vueRouter 
})
  1. 告诉路由渲染的位置
<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里面会有#号
vue全家桶系列之vue-router(二)
我们来改下路由的模式,找到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地址,没有#号了!就是这么简单!
vue全家桶系列之vue-router(二)

我们再来把例子升级一下,假如有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>

vue全家桶系列之vue-router(二)
接下来我们来修改路由的配置,找到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
    }
  ]
})

我们再来看下运行结果

vue全家桶系列之vue-router(二)
你仔细看到动画的最后,鼠标放到圆形的箭头上,显示"重新加载此页",前面每次点击你可以很清楚的发现那个圆形箭头每次都闪了下(页面刷新了),不是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后面接的是路径,也可以接一个对象(后面会说到),再来看运行的结果,圆形的箭头就不会闪动了(页面不再刷新了)
vue全家桶系列之vue-router(二)

上一篇:vuerouter拦截?


下一篇:路由重复的解决方案