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

2019年9月16日 182次阅读 来源: 小红帽

前言 前面我们在把 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 进行工程化开发。

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

    原文作者：小红帽
    原文地址: https://segmentfault.com/a/1190000019782627
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞