Vue 项目尝鲜（五）路由切换

前言 前面咱们在把 vue 项目搞起来了，也懂一点基本的操做，可是咱们以前都是在 HelloWorld.vue 那个文件里面搞的，很明显咱们一个项目不可能就只有那么一个视图的吧，咱们通常是须要切换不一样视图页面的，这个时候就要讲到咱们的 vue-router 的了，在此在此以前我建议你先去看一下官方文档了解一下。

1 准备

咱们既然要进行视图路由切换，那么原有的目录结构，就不够咱们用啦，这个时候咱们要在 src 目录下新建一个 views 文件夹，用来存放视图文件（也是 vue 文件啦）。

而后咱们既然要切换路由，固然就要搞多几个视图页面啦，咱们在 views 文件夹里面搞多几个 vue 文件，因为咱们以前已经默认装 vue-router，因此引入挂载那些咱们都不用干了，咱们直接到 router/index.js 文件里面引入视图组件，而后放到 视图表里面就好了，具体以下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入 两个视图组件
import Demo1 from '../views/demo1.vue'
import Demo2 from '../views/demo2.vue'
import Demo3 from '../views/demo3.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 添加到视图表里面，path 路由地址，name 路由名称，component 对应的组件
    {
      path: '/demo1',
      name: 'Demo1',
      component: Demo1
    },
    {
      path: '/demo2',
      name: 'Demo2',
      component: Demo2
    },
    {
      path: '/demo3',
      name: 'Demo3',
      component: Demo3
    },
  ]
})

咱们这样配完后，输入路由地址
http://localhost:8080/#/demo2 就能看到到对应的视图页面了。

2 路由切换 & 传参

固然咱们不能说每次都在浏览器里面输入地址，而后切换视图啦。因此咱们确定有用代码切换路由的方法

2.1 router-link 标签

这个标签和 a 标签同样，点击后跳转，to 属性指定跳转路由的地址，像下面这点击后叫跳到 /demo2 那边去了。

<router-link to="/demo2">页面2</router-link>

2.2 编程导航

固然咱们不能每次跳都经过点击连接来切换，因此咱们还能够经过函数来跳转，这边的话，vue-router 提供了几个方法给咱们用，咱们先简单看一下

// 导航到新路由并在 histroy 栈添加一条记录
router.push(location, onComplete?, onAbort?)

// 跟 router.push 很像，惟一的不一样就是，它不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。
router.replace(location, onComplete?, onAbort?)

// 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，相似 window.history.go(n)。
router.go(n)

咱们就以 push 方法做为示范。

// 字符串
this.$router.push('demo3')

// 对象
this.$router.push({ path: 'demo3' })


// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'demo3', query: { plan: 'private' }})

// 带参数的函数跳转，咱们在目标页面可使用 this.$route.query.plan 获取参数

关于 vue-router 的跳转大概就说这么多了，可是 vue-router 毫不仅仅只有这些，这些只是一个基本常见的操做，他里面还有不少的东西值得咱们去学习，咱们 vue 项目尝鲜系列就写到这边了，说实话，这个对于学习知识来讲没啥用，可是可让你本身心安一下，知道之后咋用 vue 进行工程化开发。

最后仍是那句话，老老实实回去看文档学习，加油！